Vue 嵌套路由

嵌套路由

嵌套路由功能分析

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

父路由组件模板

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

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

子级路由模板

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

const Register = {
　　template: `<div>
　　　　<h1>Register</h1>
　　　　<hr/>
　　　　<router-link to="/register/tab1">Tab1</router-link>
　　　　<router-link to="/register/tab2">Tab2</router-link>

　　　　<!-- 子级路由填充位 -->
　　　　<router-view / >
　　</div>`
}

嵌套路由配置

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

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

在页面中通过父组件预留的路由填充位，将子路由放在其中，然后通过子路由模板将自己想要的内容渲染出来