vue-router 嵌套路由

一、子路由的创建

1.我们使用嵌套路由之前一定要确定在哪个路由下进行嵌套

2.确定好之后，找到对应路由的文件，在指定的位置写入router-view标签

3.去router文件夹下找到index.js文件，在定义组件中找到我们想进行嵌套的路由

4.在其中添加children属性，绑定的是数组，数组里边定义新的子路由

如以下代码，就定义了path为/list的路由的子路由

import Vue from 'vue';
import VueRouter from 'vue-router';
import Mylist from '../views/Mylist.vue';
import RouterIndex from '../views/RouterIndex.vue';
import Notfound from "../views/Notfound.vue";
import Left from '../views/Listchildone.vue';
import Right from '../views/Listchildtwo.vue';
Vue.use(VueRouter)
const routes = [
 
  {
   path:'/',
   component:RouterIndex
  },
   {
    path:'/list',
    name:'list',
    component:Mylist,
    children:[
      {
        path:'childone',
        name:'left',
        component:Left
      }
      ,{
        path:'childtwo',
        name:'right',
        component:Right
                  },
    ]
  },
  {
    path:'*',
    component:Notfound
  }

]

const router = new VueRouter({
  routes
})
export default router;

二、嵌套路由的使用

在我们进行嵌套的路由里边，使用router-view添加路由，然后通过router-link进行绑定跳转的子路由

<template>
    <div>
    <aside>
    <ul class="font">
        <li><router-link :to="{name:'left'}">1孩子</router-link></li>
        <li><router-link :to="{name:'right'}">2孩子</router-link></li>
    </ul></aside>
    <main><router-view></router-view></main>
    
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
   

</style>

三、嵌套路由的路径

值得注意的是上边link标签中to属性的绑定，不能直接写我们定义时写的路径，因为子组件的路径会自动拼接父组件前边的路径，所以我们可以通过name进行绑定，或者可以通过写出完整路径进行绑定，

但是如果父组件的路径path是'/'的话，我们直接就可以用子组件的path进行绑定

即我在"/"的path路径下的路由下定义子路由，如下边代码

import Vue from 'vue';
import VueRouter from 'vue-router';
import Mylist from '../views/Mylist.vue';
import RouterIndex from '../views/RouterIndex.vue';
import Notfound from "../views/Notfound.vue";
import Left from '../views/Listchildone.vue';
import Right from '../views/Listchildtwo.vue';
Vue.use(VueRouter)
const routes = [
 
  {
   path:'/',
   component:RouterIndex,
   children:[
    {
      path:'childone',
      name:'left',
      component:Left
    }
    ,{
      path:'childtwo',
      name:'right',
      component:Right
                },
  ]
  },
   {
    path:'/list',
    name:'list',
    component:Mylist,

  },
  {
    path:'*',
    component:Notfound
  }

]

const router = new VueRouter({
  routes
})
export default router;

这样我们就在path为"/"下的路由嵌套了子路由，子路由跳转就可以直接用其路径匹配了

<router-link to='childone'></router-link>
<router-link to='childtwo'></router-link>