码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-30 15:18:59      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:方便   pat   width   code   span   一个   tps   技术   就是   

  先说原因: 子路由的路径如果是  :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
      }
    ]
  },

技术图片

 

 正常实现了!!

 

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

标签:方便   pat   width   code   span   一个   tps   技术   就是   

原文地址:https://www.cnblogs.com/xuhua123/p/12808918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!