【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮

原文作者：我辈李想
版权声明：文章原创，转载时请务必加上原文超链接、作者信息和本声明。

---

---

前言

el-menu 是element-ui的菜单组件，为网站提供导航功能的菜单。

---

一、Vue路由

这里需要vue路由的相关知识，需要自行学习。

二、路由一级控制高亮（常用）

1.vue中路由文件

需要注意的是path参数中开头为/

export default {
  path: '/personalCenter',
  name: 'personalCenter',
  meta: { title: '订单中心', parent: 'layout' },
  redirect: '/shoppingCart',
  component: () => import('@/views/personalCenter'),
  children: [
    {
      path: '/shoppingCart',
      name: 'shoppingCart',
      meta: { title: '我的购物车', parent: 'personalCenter' },
      component: ()=> import('@/views/personalCenter/module/shoppingCart.vue')
    },
    {
      path: '/archiveOrder',
      name: 'archiveOrder',
      meta: { title: '我的存档订单', parent: 'personalCenter'},
      component: ()=> import('@/views/personalCenter/module/archiveOrder.vue')
    },
    {
      path: '/myProgrammingOrder',
      name: 'myProgrammingOrder',
      meta: { title: '我的编程订单', parent: 'personalCenter'},
      component: ()=> import('@/views/personalCenter/module/myProgrammingOrder.vue')
    },
  ]
}

2.网址样式

3.Vue文件

需要注意的是el-menu的default-active参数和el-menu-item的index参数。el-menu是基于当default-active和index一致时保持高亮（active）。一般我们设置default-active为this.$route。

<template>
  <div class="user">
    <div class="menu">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <template v-for="(item, index) in routes">
          <el-menu-item
            :key="index"
            :index="item.path"
          >
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <router-view class="info" />
  </div>
</template>
<script>
import tree from '@/utils/tree';
export default {
  components: {
  },
  data() {
    return {
      routes: tree(this.$router.getRoutes())[0].children[6].children
    };
  },
  computed: {
  },

  watch: {
  },
  created() {
  },
  methods: {
    handleSelect(val) {
      console.log(this.$route);
      this.$router.push(val);
    },
    navbar() {
      this.$nextTick(() => {
        this.routes = tree(this.$router.getRoutes())[0].children[6].children;
        this.routes.map(item=>{
          item.meta.title = this.$t(`layout.${item.name}`);
        });
      });
    }
  }
};
</script>

4.$route的内容

三、路由二级控制高亮

1.vue中路由文件

需要注意的是path参数中开头无/。

export default {
  path: '/personalCenter',
  name: 'personalCenter',
  meta: {
    title: '订单中心',
    parent: 'layout',
    isShow: true
  },
  redirect: '/personalCenter/shoppingCart',
  component: () => import('@/views/personalCenter'),
  children: [
    {
      path: 'shoppingCart',
      name: 'shoppingCart',
      meta: {
        title: '我的购物车',
        parent: 'personalCenter',
        isShow: true
      },
      component: () => import('@/views/personalCenter/module/shoppingCart.vue')
    },
    {
      path: 'archiveOrder',
      name: 'archiveOrder',
      meta: {
        title: '我的存档',
        parent: 'personalCenter',
        isShow: true
      },
      component: () => import('@/views/personalCenter/module/archiveOrder.vue')
    },
    {
      path: 'myProgrammingOrder',
      name: 'myProgrammingOrder',
      meta: {
        title: '我的下单',
        parent: 'personalCenter',
        isShow: true
      },
      component: () =>
        import('@/views/personalCenter/module/myProgrammingOrder.vue')
    },
  ]
}

2.浏览器网址样式

3.Vue代码

<template>
  <div class="user">
    <div class="menu">
      <el-menu
        :default-active="$route.matched[2].path"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <template v-for="(item, index) in routes">
          <el-menu-item
            :key="index"
            :index="item.path"
          >
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <router-view class="info" />
  </div>
</template>
<script>
import tree from '@/utils/tree';
export default {
  components: {
  },
  data() {
    return {
      routes: tree(this.$router.getRoutes())[0].children[6].children
    };
  },
  computed: {
  },

  watch: {
  },
  created() {
  },
  methods: {
    handleSelect(val) {
      console.log(this.$route);
      this.$router.push(val);
    },
    navbar() {
      this.$nextTick(() => {
        this.routes = tree(this.$router.getRoutes())[0].children[6].children;
        this.routes.map(item=>{
          item.meta.title = this.$t(`layout.${item.name}`);
        });
      });
    }
  }
};

4.$route的内容

$route.matched[1]

$route.matched[2]

6.当路由超过三级时，二级路由依然生效

浏览器网址

$route的内容

四、可以衍生路由三级控制高亮

这里我就不做示例了，兄弟们自行尝试吧。

五、菜单上存在按钮时出现路由跳转失控

按钮上需要加上stop阻止冒泡，即@click.stop

<el-button :icon="Edit" @click.stop="editSession(item.session_id)" />