Question

我有一个名为Layout的Vue组件，它包含两个命名视图：

<template>
  <router-view name="navigation"></router-view>
  <router-view name="content"></router-view>
</template>

这是我的路由器定义：

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          name: 'Login',
          components: {
            navigation: Navigation,
            content: Login
          }
        }
      ]
    },
    {
      path: '/dashboard',
      component: Layout,
      children: [
        {
          path: '',
          name: 'Dashboard',
          components: {
            navigation: Navigation,
            content: Dashboard
          }
        }
      ]
    }
  ]
})

我的Navigation组件有一个特定的逻辑，根据用户是否登录而显示不同的导航栏并且运行正常。

在我的Login组件中，我有一个执行以下操作的事件处理程序：

this.$router.push({name: 'Dashboard'})

此行导致Dashboard视图替换Login命名视图中的content视图，但navigation命名视图不会更改并保持不变。预期的行为是重新渲染它并根据新数据显示不同的元素。

如果我执行完整页面重新加载但未执行$router.push()调用时，会发生预期的行为。我无法找到我做错了什么。我怎样才能达到预期的行为？

Answer 1

根据router documentation，会发生这种情况，因为一旦渲染，组件就会被重用而不会被再次解析。 Navigation组件始终呈现，因此仅在首次出现时进行解析。对此的解决方案是观察$route对象，将此代码添加到导航组件使其得到适当的解析：

watch: {
  '$route' (to, from) {
    if (from.name === 'Login' || from.name === 'Logout') {
      this.generateNavigationLinks()
    }
  }
}

如何使用$ router.push

1 个答案: