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分别组合做了一个页面 ，来测试哪种会不可以 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>router-linkto</title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="app">
<router-link :to="{ path: home }">path单独 </router-link>
<router-link :to="{ path: foo, name: foo}">path + name </router-link>
<router-link :to="{ path: bar, query: {plan:private} }">path + query /bar?plan="private"</router-link>
<router-link :to="{ name: user, params: {userId:123} }">name + params /user/123</router-link>
<router-link :to="{ name: many, query: {plan:private} }">name + query </router-link>
<router-link :to="{ params: { userId: 123 }, query: {plan: private} }">params + query </router-link>
<br/>
<br/>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const Home = {
template: <div>Home path单独 <span v-on:click="change()">点击跳转到path+name</span> </div>,
methods: {
change: function() {
this.$router.push({name: "foo", path: "/foo"})
}
}
}
const Foo = { template: "<div>Foo path+name</div>"}
const Bar = { template: "<div>Bar path+query</div>"}
const User = { template: "<div>User {{$route.params.userId}}</div>" }
const Many = { template: "<div>Many name+params</div>" }
const Too = { template: "<div>Too params + query</div>" }
const router = new VueRouter({
routes: [
{
path: "/home",
component: Home
},
{
name: "foo",
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar
},
{
name: "user",
path: "/user/:userId",
component: User
},
{
path: "/many",
name: "many",
component: Many
},
{
path: "/too/:userId",
component: Too
}
]
})
new Vue({
el: #app,
router
})
</script>
</html>
结论：
结果是：除了path+params之外 ，params+query也不可以 ，因为没有告知路径信息
那对于上面涉及二级跳转 ，那写name + path的方式 ，我理解的是path需要拼接 ，所以给了name就会找不到路径 。我之后的修改是 ，只传给push一个字符串路径 。
this.$router.push(`/ue/matter/detail/user/${userid}/user`)
vue二级路由跳转一级路由激活处理
有时候有的页面是一个页面的子页面 ，这时候点击打开跳转到二级页面 ，这个时候
一级导航的路由可能激活状态不对应
本人是这么处理的
<el-menu :default-active="$route.path.match((/[a-z]+[^/]){1})[0]"
这样就可以匹配目标页面的路由匹配头部就聚焦
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
