©2020-2024 ioDraw All rights reserved,
Privacy Policy
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'),
}] }] } ] })
好了，大概就是这样了，写的不是很完善后期持续更新！