实现菜单默认高亮(切换切面后刷新,页面与菜单对应)
在创建完项目会出现刷新当前页面,但是菜单会回到初始状态,这里主要记录一下,当我们刷新页面后,菜单高亮与对应页面相匹配
在element-ui官网可以看到,default-active绑定的是当前激活菜单的 index
我们在菜单中,index所绑定的变量是path,即路由路径,所以我们实现当前页面对应菜单默认高亮,可以想办法截取到path,将其赋值给default-active绑定的变量
实现方法
(1)将el-menu中的index与path绑定
<el-menu
:default-active="active"
ref="menunRef"
@select="handleSelect"
style="border:none"
>
<el-submenu v-for="itemTitle in menusList" :index="itemTitle.path" :key="itemTitle.path">
<template slot="title">
<span>{{ itemTitle.title }}</span>
</template>
<el-menu-item v-for="item in itemTitle.children" :index="item.path" :key="item.path">
<template slot="title">{{ item.title }}</template>
</el-menu-item>
</el-submenu>
</el-menu>
以下是menuList
export default [
{
title: '基础学习',
path: '/baseLearn',
name: 'baseLearn',
children: [
{
path: 'formLearn',
name: 'formLearn',
title: '表单学习'
},
{
path: 'tableLearn',
name: 'tableLearn',
title: 'table学习'
}
]
}
]
(2)截取路由赋值给active
computed: {
menusList () {
return menuList
},
active () {
console.log(this.$route.path.lastIndexOf('/'), '获取从最后到/获取到的位置下标')
let indexArr = this.$route.path.lastIndexOf('/') + 1
console.log(this.$route.path.substr(indexArr), '截取到的路由')
return this.$route.path.substr(indexArr)
}
},
可以看到我们打印出来的内容
后记
在这里也可以用监听
watch: {
// 监听路由 控制侧边栏激活状态
'$route': {
handler (to, from) {
let toPath = to.path
let indexArr = toPath.lastIndexOf('/') + 1
this.active = toPath.substr(indexArr)
},
immediate: true
}
},
效果同上