时间戳

首页 > 解决方案 > Vue从子路由导航到父路由的父路由不起作用

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

问题描述

我有这样的路线结构：

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
              }
           ]
        } 
     ] 
  }
]

My和可通过索引组件中的导航栏访问Users，并且它们的组件在索引组件的部分中呈现。OwnersWriters

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

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

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

问题：

我如何实现这一点，以便无论何时从导航选项卡中选择路由，无论选择路径是什么，路由都是/users或/owners ？

标签： vuejs2vue-router

解决方案

/writers/junior/owners当您加载时，路径将更改为/usersor /owners，
因为您redirect:'writers'在 parent 中添加了基本上重定向到 writers 的字段， writers 也有一个redirect:junior字段，因此它重定向到 writers/junior 然后附加 owner ，因此最终路径变为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
              }
           ]
        } 
     ] 
  }
]

推荐阅读