嵌套路由
我们知道，Vue Router文档中的动态路由匹配内容中，有一个案例为：
Vue文档案例
当我们有多级目录时：例如：有用户1001和用户1002，他们分别有一个goToProfile和goToPost的选项，分别对应This is ‘User.id' Profile和This is 'User.id' Posts的内容展示。那么我们的嵌套路由大概是这样的：
嵌套层次
那么首先，搭建好基础路由结构：
const User = {
template: `
<div>
<h1>User</h1>
<div>
<router-link to="/user/1001">User 1001</router-link>
<router-link to="/user/1002">User 1002</router-link>
</div>
<router-view></router-view>
</div>
`
}
const UserDetail = {
template: `
<div>
<h2>User Detail{{$route.params.id}}</h2>
<router-link to="profile">User 1001</router-link>
<router-link to="post">User 1002</router-link>
<router-view></router-view>
</div>
`
}
const UserProfile = {
template: `
<div>
<h3>This is User{{$route.params.id}} Profile</h3>
<router-view></router-view>
</div>
`
}
const UserPosts = {
template: `
<div>
<h3>This is User{{$route.params.id}} Posts</h3>
<router-view></router-view>
</div>
`
}
const router = new VueRouter({
routes: [
{
path:'/user',
component: User,
children: [
{
path: '/user/:id',
component: UserDetail,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'post',
component: UserPosts
}
]
}
]
}
]
})
new Vue({
el:'#app',
router
})
index.html中结构
我们在网页中可以得到基础的结构
点击User 1001后，路径和对应模板展示出来
结果如图
对应的，User 1002展示的模板为User Detail1002。接下来，想展示第三层嵌套路由，发现并不是我们所实际的那样，出现This is User{{$route.params.id}} Profile的内容，反而在第二层中替换了我们的 Detail1002，原因是我们的url地址被所点击的内容替换了。说明我们使用的跳转路径出现了问题
结果如图
解决办法
思路
首先，我们使用Router的$route属性查看路由内容，创建一个方法：
beforeUpdate() {
console.log(this.$route)
}
输出如下内容
我们想得到的结果在params属性中，有一个对象为{id:'profile}，说明此时我们我们原来应该有的1001id被替换了。
修改to中的url
这时，我们有一个思路，就是更改url地址，虽然上图得到结果，但是存在一定的问题。说明并不是正确的解决办法。
解决
在<template>中，我们使用<a>标签来代替<router-link to>的使用。能很好解决这个问题
在上面提到了，$route中的params对象里有一个为id的方法，那么我们先把它取到：
得到对应User的id
然后，我们把每次对应的id拼接到url中，那么我们每次所点击的跳转内容，就是我们想要得到的每个User.id所对应的下级嵌套路由中的内容
结果如图
最终，完美解决这个问题
小伙伴们有更好的解决办法欢迎提出，谢谢~
2019-03-13修改：click时间的修饰符
昨天发现在点击对应的路径后，URL地址并没有做相应的跳转，这样的结果并不是我们想要的。于是查看官方文档API后，发现需要使用.prevent修饰符来阻止默认<a>标签的href="#"跳转行为，于是我们加上。
添加修饰符prevent
url路径正确显示
那么到此，这个问题就成功解决了
网友评论