Vue 从子路由导航到父路由的父路由不起作用

Question

我有这样的路由结构：

routes: [
  {
     path: '/login', 
     name: 'Login', 
     component: Login
  },
  {
     path: '/', 
     component: Index, 
     redirect: '/riders', 
     children: [
        { 
           path: 'users', 
           name: 'Users', 
           component: Users
        },
        {
           path: 'owners', 
           name: 'Owners', 
           component: Owners
        },
        {  
           path: 'writers', 
           component: Writers, 
           redirect: '/junior', 
           children: [
              {
                 path: 'junior', 
                 name: 'Junior', 
                 component: JuniorWriters
              },
              {  
                 path: 'senior', 
                 name: 'Senior', 
                 component: SeniorWriters
              }
           ]
        } 
     ] 
  }
]

我的 Users、Owners 和 Writers 可通过索引组件中的导航栏访问，它们的组件呈现在索引组件的部分中。

在 Writers 组件中，我有另一个嵌套了 junior 和 senior 的组件。加载 JuniorWriters 和 SeniorWriters 组件的链接可在 Writers 组件中访问。

但是，由于我的导航选项卡位于作为整体父级的索引组件中，因此在所有组件中都可以访问它。

当我导航到 /writers/junior（或高级） 时，正确的组件加载，但是，如果我 select 所有者或用户从导航选项卡，路径更改 到 /writers/junior/owners（或用户）。

问题：

我怎样才能实现这个路由 /users 或 /所有者 任何时候他们从导航选项卡 selected，无论他们 selected 时的路径是什么?

Answer 1

当您加载 /users 或 /owners、
时，路径将更改为 /writers/junior/owners 因为您在父级中添加了 redirect:'writers' 字段，基本上 redirects 给 writers 和 writers 也有一个 redirect:junior 字段，所以它重定向到 writers/junior 然后附加 owners ，所以最终路径是成为 writers/junior/owners.

你可以试试这样的方法，给出 path:'/users' 而不是 path:'users'

  routes: [
  {
     path: '/login', 
     name: 'Login', 
     component: Login
  },
  {
     path: '/', 
     component: Index, 
     children: [
        { 
           path: '/users', 
           name: 'Users', 
           component: Users
        },
        {
           path: '/owners', 
           name: 'Owners', 
           component: Owners
        },
        {  
           path: '/writers', 
           component: Writers, 
           children: [
              {
                 path: 'junior', 
                 name: 'Junior', 
                 component: JuniorWriters
              },
              {  
                 path: 'senior', 
                 name: 'Senior', 
                 component: SeniorWriters
              }
           ]
        } 
     ] 
  }
]

Answer 2

我通过在 :to 中使用名称而不是路径来修复它，即 :to="{name: item.index}"

Vue 从子路由导航到父路由的父路由不起作用

Vue navigate from child route to parent of parent route not working

vue-router

vuejs2