First introduce element related code
<el-menu
:default-active="$route.path"
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="/src/views/Demo.vue">选项1</el-menu-item>
<el-menu-item index="/src/views/About.vue">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
Then configure routing
{
path: '/',
name: 'Home',
component: Home,
children:[
{
path: '/src/views/About.vue',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
},
{
path: '/src/views/Demo.vue',
name: 'Demo',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/Demo.vue')
}
]
},
Then click to appear vue corresponding attribute by index
then you need to write <router-view><router-view/>
a placeholder corresponding to the contents to appear vue
Overall code
<el-col :span="22">
<el-menu
:default-active="$route.path"
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="/src/views/Demo.vue">选项1</el-menu-item>
<el-menu-item index="/src/views/About.vue">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
<router-view></router-view>