【Element Plus】Menu组件：url访问页面时高亮对应菜单栏

文章目录

- 场景
- 代码
- 解决

场景

使用Element Plus的Menu 菜单 | Element Plus时，点击对应菜单会显示对应路由，此时会高亮选中菜单栏。但输入url访问对应路径，菜单栏不会默认高亮。

需求：url访问页面时高亮对应菜单栏。

代码

router：

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'

export const routes = [
  {
    path: '',
    title: '功能Demo',
    // 父组件的component中要有<router-view></router-view>才会渲染子组件。实际上我们并不需要这个父组件
    children: [
      {
        path: '/shopping-link',
        name: 'shoppingLink',
        title: '复制链接弹出信息',
        component: () => import('@/views/shoppingLink.vue'),
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

Menu:

javascript 复制代码

<template>
  <div class="menu">
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      text-color="#fff"
      :router="true"
    >
      <el-sub-menu v-for="item in routes" :index="item.path">
        <template #title>{{ item.title }}</template>
        <el-menu-item v-for="i in item.children" :index="i.path" :route="i.path" :key="i.path">
          {{ i.title }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import { routes } from '@/router/index'

</script>

<style lang="less" scoped>
.menu {
  width: 200px;
  height: 100%;
  background-color: #545c64;
  .el-menu {
    border: none;
  }
}
</style>

解决

Menu API：default-active
default-active可以设置默认高亮的菜单。当default-active的值匹配上el-menu-item的index时，对应el-menu-item会高亮。

我们这里菜单el-menu-item的index是路径，因此：进入页面时，获取路径，赋值给default-active即可。

html 复制代码

    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      text-color="#fff"
      :default-active="activePath" 
      :router="true"
    >

javascript 复制代码

import { ref, onMounted } from 'vue'
const activePath = ref('')

// 默认高亮
const getPath = () => {
  const path = location.pathname
  activePath.value = path
}

onMounted(() => {
  getPath()
})