vue-router在两个以上子路由的情况下，跳转出错

Posted 2021-02-21 Xuhua123

　　先说原因： 子路由的路径如果是  :id  那么在添加相同级别的子路由就是没用的；因为 :id  可以匹配使一个路由匹配多个不同的子路由；

 

　今天做毕设的时候，想在原本就有子路由的 根路径上多加一个子路由，以实现 下方 tabbar 的点击不改变；

  {
    path: \'/home\',
    name: \'home\',
    component: Home,
    children: [
      {
        path: \':id\',
        component: Disc
      },
      {
        path: \'search\',
        component: Search
      }
    ]
  },

所以我直接将代码加成了这样，导致进入  /home/search 后立即返回了。

解决：

1. 将search改成跟/home同级别； 将search单独写成一个路由，那么tabbar就不方便一直在选中状态了；

2.将 子路由 :id 前面加一个前缀；这样需要改变相应的路由跳转代码；

  {
    path: \'/home\',
    name: \'home\',
    component: Home,
    children: [
      {
        path: \'disc/:id\', // 在router中就改变了这里
        component: Disc
      },
      {
        path: \'search\',
        component: Search
      }
    ]
  },

 

 正常实现了！！