首先引入element相关代码
<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>
然后配置路由
{
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')
}
]
},
然后通过 index属性来进行点击出现相对应的vue
然后需要写 <router-view><router-view/>
占位符才能出现相对应vue里的内容
整体代码
<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>