vue element-ui 导航高亮问题

Question

这是首页进来是高亮的

当点击消息中心，左侧菜单第一个没有高亮，刷新后可以高亮

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
})

如何切换顶部菜单后左侧菜单也高亮 ，请指教

Answer 1

试一下给第一个写一个固定的高亮样式！