导文
vue2实现后台管理系统的侧边栏切换子页面
文章重点
路由写法
代码语言：shell复制const router = new Router({
routes: [{
path: '/',
redirect: "Home"
},
{
path: '/Home',
component: Home,
redirect: '/deviceList',//第一次出现展示的子页面
children: [{//子页面
path: '/deviceList',
component: deviceList,
},
]
},
{
path: '/login',
component: login
},
]
})侧边栏
elementui代码
代码语言：shell复制 <el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#338acf"
text-color="#fff"
active-text-color="#fff"
unique-opened
router
>
<el-submenu :index="item.id ''" v-for="item in menulist" :key="item.id">
<template slot="title">
<iconSvg :iconname="item.iconName" class="headerIcon" />
<span>{{ item.autName }}</span>
</template>
<el-menu-item-group>
<el-menu-item
:index="'/' subItem.path"
v-for="subItem in item.children"
:key="subItem.id"
:disabled="subItem.disableds"
>
<div
:style="{
backgroundColor:
'/' subItem.path == activeIndex
? 'rgba(7, 167, 235, 1)'
: '',
}"
class="submenuItem"
>
<iconSvg :iconname="subItem.iconName" class="headerIcon" />
<span>{{ subItem.autName }}</span>
</div>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>data值
代码语言：shell复制 menulist: [
{
id: 1,
autName: "设备管理",
iconName: "icon-shebeiguanli",
children: [
{
id: "1 - 1",
autName: "设备列表",
iconName: "icon-liebiao",
path: "deviceList",
},
],
},
},
监听页面当前路由值
代码语言：shell复制 this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
