嵌套路由,子路由的界面将渲染到父路由的router-view,常用于嵌套结构,父页面几乎不变,子页面切换,如顶部菜单栏,店家切换中间内容,顶部菜单栏不消失
嵌套路由代码如下
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
}
]
}
]
实例