vue 路由嵌套小结

1、在login（父路由） 先引用要嵌套的内容（子路由），

import Ceshia from '@/components/CeShiA/CeShiA'
import Ceshib from '@/components/CeShiB/CeShiB'
import CeShiAA from '@/components/CeShiA/CeShiAA/CeShiAA'
import CeShiAB from '@/components/CeShiA/CeShiAB/CeShiAB'

2、router路由里设置"children"属性

routes: [
    {
      path: '/login',
      name:'login',
      component:Login,
      children:[
        {
          path:'ceshia',
          name:'ceshia',
          component:Ceshia,
          children:[
            {
              path:'ceshiAA',
              name:'ceshiAA',
              component:CeShiAA,
            },
            {
              path:'ceshiBB',
              name:'ceshiBB',
              component:CeShiAB
            }
          ],
        },
        {
          path:'ceshib',
          name:'ceshib',
          component:Ceshib
        }
      ] 
    },   
]

3、login（父路由要有占位符 <router-view /> ）

 

<template>
  <div class="hello">
      <router-link :to="{path:'/login/ceshia'}">Ceshiaaaaaaaaaaaa</router-link>
    <br/>
    <router-link :to="{path:'/login/ceshib'}">Ceshibbbbbbbbbbbbbb</router-link>
    <br/>
    <router-view />
   </div> 
</template>