为什么当我返回第一页时 beforeRouteUpdate 不起作用？

Question

我有带有分页器的组件。在这个组件中，我有 beforeRouteEnter 和 beforeRouteUpdate 用于获取数据。 我在浏览器中打开 http://localhost:8080/#/pages/1 在此之后我点击链接 .../pages/2 .../pages/3 和 beforeRouteUpdate 获取数据并显示。当我点击链接 .../pages/1 （它是第一个路径，beforeRouteEnter 与他合作）浏览器转到此链接，但 beforeRouteUpdate 没有发生，我看到旧页面的数据

我的路由器代码：

export default new Router({
  mode: 'hash',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [{
    path: '/',
    redirect: '/pages/1',
    name: 'Home',
    component: Full,
    children: [{
      path: 'pages/:num?',
      name: 'Pages',
      component: Pages
    }, {
      path: 'pageForm/:id?',
      name: 'PageForm',
      component: PageForm
    }, {
      path: 'settings',
      name: 'Settings',
      component: Settings
    }]
  }]
})

我该如何解决这个问题？

UPD：

在 App.vue 和 Full.vue 我替换了

 <router-view></router-view>

到

      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>  
      </transition>

但它对我不起作用

UPD2

我在 App.vue 中制作

<keep-alive include="full">
  <router-view></router-view>
</keep-alive>  

在 Full.vue 中

<keep-alive include="Pages">
  <router-view></router-view>
</keep-alive>

但它对我也不起作用

Answer 1

您的组件由 vue 缓存。所以，你需要使用keep-alive。这将使您的组件保持新鲜，并且不允许从缓存中渲染组件。

注意：

当一个组件在内部切换时，它的激活和停用生命周期钩子将被相应地调用。

<keep-alive> 不适用于功能组件，因为它们没有要缓存的实例。

Answer 2

我的错误出现在我的代码中。我没有在 beforeRouteUpdate 中调用 next()。 现在一切正常