Article directory
Introduction
Vue2 implements the sidebar switching subpage of the background management system
article focus
Routing
const router = new Router({
routes: [{
path: '/',
redirect: "Home"
},
{
path: '/Home',
component: Home,
redirect: '/deviceList',//第一次出现展示的子页面
children: [{
//子页面
path: '/deviceList',
component: deviceList,
},
]
},
{
path: '/login',
component: login
},
]
})
Sidebar
elementui code
<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 value
menulist: [
{
id: 1,
autName: "设备管理",
iconName: "icon-shebeiguanli",
children: [
{
id: "1 - 1",
autName: "设备列表",
iconName: "icon-liebiao",
path: "deviceList",
},
],
},
},
Monitor the current routing value of the page
this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单