使用Vue-router二级路由跳转另一条路由下的子级_vue.js_

Vue-router二级路由跳转另一条路由下的子级

实验项目中，在一个 /list/user 列表中，当点击某一条时，需要跳转到 /detail/userId/user 详情下，展示详情信息。

router.js

const routes = [ { path: '/ue/matter/list', name: 'list', component: List, children: [ { path: 'user', name: 'list-user', component: ListUser }, ], props: true }, { path: '/ue/matter/detail/:userId', name: 'detail', component: Detail, children: [ { path: 'user', name: 'detail-user', component: DetailUser }, ], props: true } ]

ListUser 组件中，采用编程式导航的方式跳转，写法如下：

this.$router.push({name:detail-user, path:`/ue/matter/detail/user/${userid}/user}`)；

或者如下

this.$router.push({name: detail-user});

结果

组件内容确实更换了，但浏览器上的地址栏错了

实验

看官方文档说，path+params地方式会被忽略，所以将router.push中用到的键path、params、name、query分别组合做了一个页面，来测试哪种会不可以。

path单独     path + name     path + query /bar?plan="private"    name + params /user/123    name + query     params + query     

结论：

结果是：除了path+params之外，params+query也不可以，因为没有告知路径信息

那对于上面涉及二级跳转，那写name + path的方式，我理解的是path需要拼接，所以给了name就会找不到路径。我之后的修改是，只传给push一个字符串路径。

this.$router.push(`/ue/matter/detail/user/${userid}/user`)

vue二级路由跳转一级路由激活处理

有时候有的页面是一个页面的子页面，这时候点击打开跳转到二级页面，这个时候

一级导航的路由可能激活状态不对应

本人是这么处理的

这样就可以匹配目标页面的路由匹配头部就聚焦 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！