【Vue】vue element-ui 导航高亮问题

Z时代
2024-01-10
分类：技术分享

这是首页进来是高亮的
【Vue】vue element-ui 导航高亮问题

当点击消息中心，左侧菜单第一个没有高亮，刷新后可以高亮
【Vue】vue element-ui 导航高亮问题

Home.vue 文件引入左侧菜单组件

<template>
<div class="home">
<el-container>
<el-header>
<el-row>
<el-col :span="4"><div class="f18 white">后台管理系统</div></el-col>
<el-col :span="16">
<el-menu
:default-active="$route.path"
mode="horizontal"
@select="handleSelect"
background-color="#1f2d3d"
text-color="#fff"
active-text-color="#ffd04b" router>
<el-menu-item index="/Table">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="/Form">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index='/User'>消息中心</el-menu-item>
<el-menu-item index="4"><a href="#" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</el-col>
<el-col :span="4" class="text-r">
<el-dropdown class="f12 white">
<span class="el-dropdown-link">
admin<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="f12">修改资料</el-dropdown-item>
<el-dropdown-item class="f12">修改密码</el-dropdown-item>
<el-dropdown-item divided class="f12"><router-link to="/">退出</router-link></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-header>
<el-container>
<el-aside>
<leftMenu ref="leftMenu"></leftMenu>
</el-aside>
<el-main>
<el-breadcrumb separator-class="el-icon-arrow-right" class="mb20">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<transition name="fade" mode="out-in" appear>
<router-view></router-view>
</transition>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import LeftMenu from './common/LeftMenu.vue'
export default {
name: 'Home',
data () {
return {
}
},
components: {
LeftMenu
},
methods: {
handleSelect (key, keyPath) {
this.$refs.leftMenu.getMenu(key) // 调用LeftMenu子组件方法
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-breadcrumb{
font-size:12px;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s
}
.fade-enter,.fade-leave-active{
opacity: 0;
}
</style>

LeftMenu.vue

<template>
<el-menu class="left-menu" :default-active="$route.path" background-color='#324057' text-color='#fff' :collapse="isCollapse" router>
<template v-for="secMenu in menuData">
<el-submenu index="1" class="submenu-title" :key="secMenu.id" v-if="secMenu.list">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">{{secMenu.submenu}}</span>
</template>
<el-menu-item :index='subItem.path' v-for="subItem in secMenu.list" :key="subItem.id">{{subItem.menu}}</el-menu-item>
</el-submenu>
<el-menu-item :index="secMenu.path" :key="secMenu.id" v-else>
<i class="el-icon-menu"></i>
<span slot="title">{{secMenu.menu}}</span>
</el-menu-item>
</template>
</el-menu>
</template>
<script>
export default {
name: 'LeftMenu',
props: ['activeIndex'],
data () {
return {
isCollapse: false,
menuData: []
}
},
methods: {
handleOpen (key, keyPath) {
console.log(this.$store.state.navSelected)
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
},
getMenu (key) {
// console.log(key)
if (key === '/Table') {
this.menuData = [
{
menu: '首页11',
path: '/Table',
id: 1
}
]
} else if (key === '/Form') {
this.menuData = [
{
menu: '表单1',
path: '/Form',
id: 1
},
{
menu: '表单2',
path: '/Table',
id: 2
}
]
} else {
this.menuData = [
{
menu: '消息中心1',
path: '/User',
id: 1
},
{
menu: '消息中心2',
path: '/Table',
id: 2
}
]
}
}
},
created () {
const curPathName = this.$router.history.current.name
// console.log(curPathName)
this.getMenu('/' + curPathName)
this.activeIndex = '/' + curPathName
this.$router.push(curPathName)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-menu-item{
width:200px;
height: 40px;
line-height: 40px;
font-size:12px;
}
</style>

路由配置文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Table from '@/components/Table'
import Form from '@/components/Form'
import Login from '@/components/Login'
import User from '@/components/User'
Vue.use(Router)
const routes = [
{
path: '/',
redirect: '/Login'
},
{
path: '/Login',
component: Login
},
{
path: '/Home',
component: Home,
redirect: '/Table',
children: [
{ path: '/Table', component: Table, name: 'Table' },
{ path: '/Form', component: Form, name: 'Form' }
]
},
{
path: '/Home',
name: 'Home',
component: Home,
children: [
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 Home 的 <router-view> 中
{ path: '/User', component: User, name: 'User' }
]
}
]
export default new Router({
// mode: 'history', // 去掉地址中#
routes
})