vue后台管理系统多级路由嵌套实现侧导航

点击一级菜单展开二级菜单，点击二级菜单展开三级菜单，点击三级菜单跳转到相应的路由

话不多说，直接效果图

因为项目中有这样的需求，所以就写一个笔记，方便下次查阅

vue文件目录

layout.vue代码

<template>
  <div class="app-wrapper">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <side-item></side-item>
        </el-aside>
        <el-main>
          <app-main></app-main>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  import SideItem from './SideItem';
  import AppMain from './AppMain';
  export default {
    name: 'Layout',
    components: {
      SideItem,
      AppMain
    },
    data() {
      return {

      }
    }
  }
</script>

sideitem.vue代码

<template>
  <div class="aside">
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>路由嵌套</template>
        <el-submenu index="1-1">
          <template slot="title">路由嵌套1</template>
          <router-link to="/home/test1/test1-1">
            <el-menu-item index="1-1-1">路由嵌套1-1</el-menu-item>
          </router-link>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </div>
</template>

注意：主要是这里的路径不要写错了，因为在写后台管理系统的时候，侧边的菜单都是直接用router里面的内容，所以这里的路径很容易写错，导致最终的效果不是我们想要的，所以这里直接写或者拼接的时候不要写错了

test1文件下index.vue代码

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

<style>
</style>

router文件夹下index.js代码

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/views/layout/Layout'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
    },
    {
      path: '/home',
      name: 'home',
      component: Layout,
      children:[
        {
        path:'test1',
        name:'test1',
        component:()=>import('@/views/test1/index'),
        meta:{
          title:'路由嵌套'
        },
        children:[
          {
          path:'test1-1',
          name:'test1-1',
          component:()=>import('@/views/test1-1/index'),
          meta:{
            title:'路由嵌套1-1'
          }
        },
        {
          path:'test1-2',
          name:'test1-2',
          component:()=>import('@/views/test1-2/index'),
        }]
      }]
    }
  ]
})

好了，大概就是这样了，写的不是很完善后期持续更新！