<el-menu
background-color="#05245c"
text-color="#fff"
active-text-color="#409EFF"
:default-active="$route.path"
:router="true"
:collapse="ifCollapse"
:collapse-transition="false"
>
<template v-for="item in menuList" >
<el-submenu v-if="item.children" :index="item.path" :key="item.name">
<template slot="title">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</template>
</el-submenu>
<el-menu-item v-else :index="item.path" >
<i :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
使用
:default-active="$route.path"
进行绑定当前路径
data() {
return {
menuList: [
{
name:'首页',
path:'/home/home',
icon:'el-icon-s-home'
},
{
name: '商品列表 ',
path: '/pms/product',
icon: 'el-icon-s-goods',
}, {
name: '用户列表',
path: '/ums/user',
icon: 'el-icon-user-solid',
},{
name: '订单列表',
path: '/oms/order',
icon: 'el-icon-s-order',
},
{
name: '测试',
path: '/test/test',
icon: 'el-icon-cpu',
},
如果menuList中的path路径有重定向的话,需要具体写到重定向指向的路径,否则activity和default-activity不起作用。例如:
前提:存在以下router配置
{
path:'/home',
component:Layout,
redirect:'/home/home',
children:[{
path: 'home',
name: 'home',
component: () => import('@/views/Manage/HomeView')
}]
},
那么menuList中的
{
name:'首页',
path:'/home',
icon:'el-icon-s-home'
},
需要写成
{
name:'首页',
path:'/home/home',
icon:'el-icon-s-home'
},