07. vue-router嵌套路由

嵌套路由用法

1.嵌套路由功能分析

• 点击父级路由链接显示模板内容
• 模板内容中又有子级路由链接
• 点击子级路由链接显示子级模板内容
  

2.父路由组件模板

• 父级路由链接
• 父组件路由填充位

User 
Register

3.子级路由模板

• 子级路由链接
• 子级路由填充位

const Register = {
//使用模板字符串 `xxx`，即反引号，支持回车，换行
template: `

Register组件

Tab1
Tab2


`
}

4.嵌套路由配置

• 父级路由通过children属性配置 子级路由

const router = new VueRouter({
routes: [
{ path: ' /user', component: User },
{ path: '/register',
component: Register,
//通过children 属性，为/register 添加子路由规则
children: [
{ path: "/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
    ]
   }
 ]
})