【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-itemindex时,对应el-menu-item会高亮。

我们这里菜单el-menu-itemindex是路径,因此:进入页面时,获取路径,赋值给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()
})
相关推荐
恋猫de小郭24 分钟前
Compose Hot Reload 为什么只支持桌面 JVM,它和 Live Edit 又有什么区别?
android·前端·flutter
10年前端老司机1 小时前
Vue3项目中使用vue-draggable-plus实现拖拽需求简直不要太丝滑
前端·javascript·vue.js
&白帝&6 小时前
前端实现截图的几种方法
前端
动能小子ohhh6 小时前
html实现登录与注册功能案例(不写死且只使用js)
开发语言·前端·javascript·python·html
小小小小宇7 小时前
大文件断点续传笔记
前端
Jimmy7 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
保持学习ing7 小时前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery
李明一.8 小时前
Java 全栈开发学习:从后端基石到前端灵动的成长之路
java·前端·学习
观默8 小时前
我用AI造了个“懂我家娃”的育儿助手
前端·人工智能·产品
crary,记忆8 小时前
微前端MFE:(React 与 Angular)框架之间的通信方式
前端·javascript·学习·react.js·angular