vue + ElementUI点击导航栏跳转页面是可以正常跳转高亮的，但通过页面内点击按钮跳转页面就会导致侧边栏不知道该选中哪个了（哪个处于高亮状态）？
（遇到了这个问题，也从网上搜了一些解决办法，结合自己的项目整合了下）
解决办法如下：
侧边栏代码如下：
Sidebar.vue
<template>
<div class=”sidebar”>
<el-menu
class=”sidebar-el-menu”
:default-active=”onRoutes”
:collapse=”collapse”
background-color=”#324157″
text-color=”#bfcbd9″
active-text-color=”#20a0ff”
unique-opened
router
>
<template v-for=”item in items”>
<template v-if=”item.subs”>
<el-submenu :index=”item.index” :key=”item.index”>
<template slot=”title”>
<i :class=”item.icon”></i>
<span slot=”title”>{{item.title}}</span>
</template>
<template v-for=”subItem in item.subs”>
<el-submenu v-if=”subItem.subs” :index=”subItem.index” :key=”subItem.index”>
<template slot=”title”>{{subItem.title}}</template>
<el-menu-item
v-for=”(threeItem,i) in subItem.subs”
:key=”i”
:index=”threeItem.index”
>{{threeItem.title}}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index=”subItem.index” :key=”subItem.index”>{{subItem.title}}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index=”item.index” :key=”item.index”>
<i :class=”item.icon”></i>
<span slot=”title”>{{item.title}}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script>
export default {
name: “Sidebar”,
data() {
return {
collapse: false,
items: [
{
icon: “el-icon-s-home”,
index: “TestPaperInformation”,
title: “系统首页”
},
{
icon: “el-icon-document-copy”,
index: “table”,
title: “试卷管理”,
subs: [
{
index: “testPaperInfo”,
title: “试卷信息”
},
{
index: “test”,
title: “组卷”
}
]
},
{
icon: “el-icon-tickets”,
index: “QuestionBankManagement”,
title: “题库管理”,
subs: [
{
index: “topicManagement”,
title: “题目管理”
}
]
},
{
icon: “el-icon-edit-outline”,
index: “3”,
title: “考试管理”,
subs: [
{
index: “form”,
title: “安排考试”
},
{
index: “upload”,
title: “考试信息”
}
]
},
{
icon: “el-icon-user”,
index: “icon”,
title: “考生管理”,
subs: [
{
index: “list”,
title: “考生列表”
}
]
}
]
};
},
computed: {
onRoutes() {
//主要的是这部分代码
if (this.$route.path.replace(“/”, “”) == “detail”) {
return “topicManagement”;
} else {
return this.$route.path.replace(“/”, “”);
}
}
},
};
</script>
路由里面的代码：
router.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
const routes = [
{
path: ‘/’,
redirect: ‘/testPaperInfo’
},
{
path: ‘/’,
component: () => import(‘../components/content/Home.vue’),
meta: { title: ‘自述文件’ },
children: [
{
path: ‘/testPaperInfo’,
component: () => import(‘../views/TestPaperManagement/TestPaperInfo.vue’),
meta: { title: ‘系统首页’ }
},
{
// 拖拽列表组件
path: ‘/topicManagement’,
component: () => import(‘../views/QuestionBankManagement/TopicManagement.vue’),
meta: { title: ‘题目管理’ }
},
{
// 拖拽列表组件
path: ‘/detail’,
component: () => import(‘../views/QuestionBankManagement/childComps/detail.vue’),
//name主要
name:’information’,
meta: { title: ‘新增详情’},
// hidden:true
},
]
},
{
path: ‘/login’,
component: () => import(‘../views/Login.vue’),
meta: { title: ‘登录’ }
}
]
const router = new VueRouter({
routes
})
export default router
需要点击按钮跳转的页面：
TopicManagementContent.vue
<el-button type=”primary” @click=”viewRounterCurr”>
<i class=”el-icon-plus”></i>新增试题
</el-button>
<script>
export default {
methods: {
viewRounterCurr(row){
//这里的name要和路由的对应
this.$router.push({ name:’information’, query: { id: row.id }})
}
}
};
</script>