vue中用vue-cli搭建的项目之el-menu导航栏切换到对应路由下的导航栏高亮

欢迎一起交流，可以要一个赞吗，嘿嘿

具体效果图如下

1.第一次进入，默认选中组件超市，注意看网址栏后面的item.name变化

2.切换到我的发布

3.在我的发布页面进行刷新

导航栏组件如下

1.重点：

//动态判断当前点击的导航栏是否和要跳转的路由name相同，
//相同则切换到目标路由的同时，触发active属性，高亮导航栏
:class="activeMenu == '/' + item.name ? 'active' : ''"
//我这里的item.name其实就是要跳转路由后面的一串地址ComponentSupermarket
//我的是http://10.45.148.213:8080/#/ComponentSupermarket这样的						

//default-active="activeMenu"// 默认高亮（当前激活菜单的 index）
:default-active="activeMenu"

2.全部代码如下：

<template>
  <div class="header">
    <div class="img">
      <img src="@/assets/logo.png" alt="">
    </div>
    <!-- :default-active="activeMenu"   // 默认高亮（当前激活菜单的 index）
    router  // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，此时菜单的高亮是menu组件中的index属性和地址栏中的路径匹配到了就会高亮。 -->
      <!-- :default-active="activeMenu" -->
    <el-menu :default-active="activeMenu"
              mode="horizontal"
              @select="handleSelect"
              router
              background-color="#222732"
              active-text-color="#FFFEFE"
              text-color="#FFFFFF"
              v-for="(item, index) in navList" 
              :key="index" 
    >
    <!-- 当将el-menu的router属性设置为true时，跳转的路由如果没有设置route，则使用的是index的值，如果写了route，则路由使用的是route的值 -->
      <el-menu-item :index="item.name" 
                    :class="activeMenu == '/' + item.name ? 'active' : ''"
      >
        <template slot="title">
          <span> {{ item.navItem }}</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
    data() {
      return {
          navList:[
              {name:'OverviewOfComponentResources',navItem:'组件资源总览'},
              {name:'ComponentSupermarket',navItem:'组件超市'},
              {name:'ComponentAssetManagement',navItem:'组件资产管理'},
              {name:'ComponenTypeManagement',navItem:'组件类型管理'},
              {name:'UserAccessManagement',navItem:'用户账号管理'},
              {name:'MyRelease',navItem:'我的发布'},
              {name:'MyDownloads',navItem:'我的下载'},
          ],    
      };
    },
    computed: {
      activeMenu () {
        const route = this.$route
        const { meta, path } = route
        console.log(meta, path)
        if (meta.activeMenu) {
          return meta.activeMenu
        }
        return path
      }
    },

    methods: {
      handleSelect(key, keyPath) {
        console.log(key,keyPath);
      },
    }
}

</script>


<style lang="scss">
.header {
  display: flex;
  width: 100%;
  height: 69px;
  background-color: #222732;
  border-bottom:0px !important;

  .img {
    background:#222732;
    img {
      width: 292px;
      height:36px;
      padding:5px;
      margin-top: 9px;
    }
  }

  .el-menu{
    height: 69px;
    background-color: #222732 !important;
    color: #ffffff !important;
  }

  .el-menu--horizontal {
    border-bottom: solid 1px #222732 !important;
  }

  .el-menu-item {
    font-size: 21px !important;
    background-color: #222732 !important;
    text-align: right;
    float: right;
    color: #ffffff !important;
    height: 69px !important;
    border-bottom:0px !important;

    //高亮显示
    &.active{
      color: #ffffff !important;
      background-color: #0082c8 !important;
      height: 69px !important;
    }
  }
}

</style>

router下的index.js配置如下

1.重点：
在每一个要跳转的路由路径下面添加meta,其中里面的activeMenu就是当切换导航栏时要自动添加在浏览器后面的地址item.name
2.这里我只展示主要代码部分：

export default new Router({

  routes:[
    {
      path: '/',
      name: 'main',
      redirect: ComponentSupermarket
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: '/ComponentSupermarket',
          name: 'ComponentSupermarket',
          component: ComponentSupermarket,
          meta: {
            title: '组件超市',
            activeMenu: '/ComponentSupermarket'
          }
        },
        {
          path: '/MyRelease',
          name: 'MyRelease',
          component: () => import('@/views/MyRelease.vue'),
          meta: {
            title: '我的发布',
            activeMenu: '/MyRelease'
          }
        },
      ]
    },
  ]
})