Vue router 路由嵌套children的基本使用实例讲解

首先要在自己的路由配置文件里面创建对应的路由

例如我的路由主页是routerindex
两个子路由分别是routerboy和routergirl

1. import Vue from 'vue'
   
2. //1.引入路由
   
3. import VueRouter from 'vue-router'
   
4. 
   
5. import RouterIndex from '@/components/routerproject/routerindex'
   
6. import routerboy from '@/components/routerproject/routerboy'
   
7. import routergirl from '@/components/routerproject/routergirl'
   
8. 
   
9. //2.安装路由
   
10. Vue.use(VueRouter)
    
11. 
    
12. //3.创建路由
    
13. export default new VueRouter({
    
14.         routes:[
    
15.                 {
    
16.                         path:"/routerproject/routerindex",
    
17.                         name:"routerindex",
    
18.                         component:RouterIndex,
    
19.                         children:[
    
20.                                 {
    
21.                                         path:"routerboy",
    
22.                                         name:"routerboy",
    
23.                                         component:routerboy
    
24.                                 },
    
25.                                 {
    
26.                                         path:"routergirl",
    
27.                                         name:"routergirl",
    
28.                                         component:routergirl
    
29.                                 }
    
30.                         ]
    
31.                 }
    
32.         ]
    
33. })
    

复制代码

子路由需要在 VueRouter 的参数中使用 children 配置；
切记，在children 中，子路由的路径不要加 / ；

然后再看主路由页面routerindex的代码
1、首先要写入<router-view></router-view>添加路由视图
2、使用router-link并且写上子路由的位置路径，注意，这里就需要写上完整的路径

1. <template>
   
2.         <div>
   
3.                 <h3>路由首页</h3>
   
4.                 <router-link  to="/routerproject/routerindex/routerboy">跳转至儿子路由页面</router-link>
   
5.                 <router-link  to="/routerproject/routerindex/routergirl">跳转至女儿路由页面</router-link>
   
6.                 <router-view></router-view>
   
7.         </div>
   
8. </template>
   
9. 
   
10. <script>
    
11.         export default {
    
12.                 name: 'routerindex',
    
13.                 props: {
    
14.                 },
    
15.                 data(){
    
16.                     return{
    
17.                     }
    
18.                 }
    
19.         }
    
20. </script>
    
21. 
    
22. <style>
    
23. </style>
    

复制代码

这是页面默认显示的样子，路径结尾是路由首页的路径

点击对应的跳转按钮，路径就会改变，页面上也会显示对应的路由页面显示的内容，如下图


如果想要直接显示【儿子路由】或者【女儿路由】，在路由配置文件中，添加redirect重定向即可

1. children:[
   
2.         {
   
3.                 path:"",
   
4.                 redirect:"routerboy"
   
5.         },
   
6.         {
   
7.                 path:"routerboy",
   
8.                 name:"routerboy",
   
9.                 component:routerboy
   
10.         },
    
11.         {
    
12.                 path:"routergirl",
    
13.                 name:"routergirl",
    
14.                 component:routergirl
    
15.         }
    
16. ]
    

复制代码