1:查看router-view所对应的位置,是属于*出口还是存在于某个组件当中
2:当router-view存在于某个组件当中时
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
那么我们在路由文件中,定义对应user的路由当中,需要添加子路由形式
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
},
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
]
}
]
})
** 以'/'开头的嵌套路径会被当作根路径,合理的模式是给每个级别的路由都添加空的子路由