vue element-ui 導(dǎo)航高亮問題

這是首頁進(jìn)來是高亮的
圖片描述

當(dāng)點(diǎn)擊消息中心，左側(cè)菜單第一個(gè)沒有高亮，刷新后可以高亮
圖片描述

Home.vue 文件引入左側(cè)菜單組件

<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4"><div class="f18 white">后臺管理系統(tǒng)</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">選項(xiàng)1</el-menu-item>
                <el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
                <el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">選項(xiàng)4</template>
                  <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
                  <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
                  <el-menu-item index="2-4-3">選項(xiàng)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) // 調(diào)用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: [
      // 當(dāng) /user/:id/profile 匹配成功，
      // UserProfile 會被渲染在 Home 的 <router-view> 中
      { path: '/User', component: User, name: 'User' }
    ]
  }
]
export default new Router({
  // mode: 'history', // 去掉地址中#
  routes
})

如何切換頂部菜單后左側(cè)菜單也高亮，請指教

回答

編輯回答