07. vue-router嵌套路由

Posted 2021-03-21 songsongblue

嵌套路由用法

1.嵌套路由功能分析

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

2.父路由组件模板

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

<p>
<router-link to="/user">User </router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
<!--控制组件的显示位置-->
<router-view></router-view>
</div>

3.子级路由模板

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

const Register = {
//使用模板字符串 `xxx`，支持回车
template: `<div>
<h1>Register组件</hl>
<hr/>
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</ router-link>
<!--子路由填充位置-->
<router-view/>
</div>`
}

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 }
    ]
   }
 ]
})