3、vue-router嵌套路由 · 2021 web前端工程师

# 3、vue-router嵌套路由 # 3.1嵌套路由用法 1.嵌套路由功能分析 ● 点击父级路由链接显示模板内容 ● 模板内容中又有子级路由链接 ● 点击子级路由链接显示子级模板内容 ![](https://img.kancloud.cn/57/a0/57a030e5c726352d36296e3e87f46c00_447x177.png) ## 2.父路由组件模板 ● 父级路由链接 ● 父组件路由填充位 ~~~ <p> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> </p> <div>  <router-view/ > </div>` } ~~~ ## 4.嵌套路由配置 ●父级路由通过children属性配置子级路由 ~~~ const router = new VueRouter ( { routes : [ { path: ' /user', component: User }， { path: ' / register', component: Registe r, //通过children 属性，为/register 添加子路由规则 children: [ { path: ' /register/tab1'，component: Tab1 }， { path: ' /register/tab2'，component: Tab2 } ] ] } }) ~~~ 嵌套路由代码分析 ~~~ <body>  <div id="app">  <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link>  <router-view></router-view> </div> <script type="text/javascript"> //定义路由组件 const User = { template: '<h1>User 组件</h1>' } 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></router-view> </div>` // 上面添加子路由链接 // 子路由占位符 } //子组件 const Tab1 = { template: '<h3>tab1 子组件</h3>' } const Tab2 = { template: '<h3>tab2 子组件</h3>' } //创建路由实例 const router = new VueRouter({ //所有的路由规则 routes: [ //path表示需要被重定向的原地址， //redirect表示将要被重定向到的新地址 { path: '/', redirect: '/user' }, { path: '/user', component: User }, //children 数组表示子路由规则 { path: '/register', component: Register, children: [{ path: '/register/tab1', component: Tab1 }, { path: '/register/tab2', component: Tab2 }] } ] }) const vm = new Vue({ el: '#app', data: {}, //挂载路由实例对象 //router: router router }) </script> </body> ~~~