vue Multi level route nesting for side navigation in background management system
Click the first level menu to expand the second level menu , Click the second level menu to expand the third level menu , Click the third level menu to jump to the corresponding route
Don't say much , Direct effect picture
Because there are such requirements in the project , So write a note , Convenient for next reference
vue File directory
layout.vue code
<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 code
<template> <div class="aside"> <el-menu :default-openeds="['1']"> <el-submenu
index="1"> <template slot="title"><i
class="el-icon-message"></i> Route nesting </template> <el-submenu index="1-1"> <template
slot="title"> Route nesting 1</template> <router-link to="/home/test1/test1-1">
<el-menu-item index="1-1-1"> Route nesting 1-1</el-menu-item> </router-link> </el-submenu>
</el-submenu> </el-menu> </div> </template>
be careful
： The main reason is that the path here should not be written wrong , Because when writing the background management system , The menu on the side is direct router What's in it , So the path here is easy to write wrong , The result is not what we want , So don't make mistakes when writing or splicing here
test1 Under the document index.vue code
<template> <div> <router-view></router-view> </div> </template> <script>
</script> <style> </style>
router Under the folder index.js code
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:' Route nesting ' }, children:[
{ path:'test1-1', name:'test1-1',
component:()=>import('@/views/test1-1/index'), meta:{ title:' Route nesting 1-1' } }, {
path:'test1-2', name:'test1-2', component:()=>import('@/views/test1-2/index'),
}] }] } ] })
okay , That's about it , The writing is not very perfect, and it will be updated continuously later !
Technology