VueRouter 嵌套路由
程序员文章站
2022-03-25 14:03:12
...
1.在父路由中插入子路由链接,路由填充位
const Register = {
template: `
<div>
<div>
<p>register组件<p>
</div>
<div class="innerbox">
<div class="ialist">
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
</div>
<div class="tt">
//路由填充位
<router-view/>
</div>
</div>
</div>
`
};
2.定义子路由
const Tab1 = {
template: `
<h3>Tab1组件</h3>
`
};
const Tab2 = {
template: `
<h3>Tab2组件</h3>
`
};
3.路由嵌套配置
const router = new VueRouter({
// 所有路由规则
routes: [ {
path: '/register',
component: Register,
children: [{
path: '/register/tab1',
component: Tab1
}, {
path: '/register/tab2',
component: Tab2
}]
}]
})