vue-element-admin最新版4.4实现多个url路由匹配到一个路径时,左侧菜单保持高亮状态

简介: vue-element-admin最新版4.4实现多个url路由匹配到一个路径时,左侧菜单保持高亮状态
环境:

vue-admin-template-4.4版本(vue2

需求:

当我访问申请开户时,也希望支付菜单能保持高亮状态。

原因分析:

因为菜单这里用的是精确匹配路由,只有访问到url对应的路由,该菜单才会高亮。

如何解决:

1、首先找到 src\router\index.js,在需要保存高亮的菜单路由这,比如上面的openAccount中添加如下信息:

{
    path: "/openAccount",
    component: Layout,
    children: [
      {
        path: "",
        name: "openAccount",
        hidden: true,
        component: () => import("@/views/pay/openAccount"),
        meta: {
          title: "申请开户",
          icon: "password",
          keepMenuActive: true,  //新增
          targetPath: "/pay", //新增
        },
      },
    ],

2、再找到 src\layout\components\Sidebar\index.vue 第40行,即这里:

<el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in permission_routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
<script>
export default {
  components: { SidebarItem, Logo },
  computed: {
    activeMenu() {
          const route = this.$route;
          const { meta, path } = route;
          // if set path, the sidebar will highlight the path you set
          if (meta.activeMenu) {
            return meta.activeMenu;
          }
          // 多个 path,匹配到某个path,并且高亮到该path菜单-----新增如下if语句
          if (meta.keepMenuActive) {
            return meta.targetPath;
          }
          return path;
        },
  }
</script>

新增一条if语句:

if (meta.keepMenuActive) {
    return meta.targetPath;
}

保存即可实现需求。效果如图:

如果你在web前端开发、面试、前端学习路线有困难可以加我V。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!


相关文章
|
1月前
|
JavaScript
如何使用Vue的路由实现组件的懒加载和按需加载?
如何使用Vue的路由实现组件的懒加载和按需加载?
29 1
|
15天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
30 0
|
1月前
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
43 0
|
1月前
|
JavaScript
如何使用Vue异步组件技术实现路由懒加载?
如何使用Vue异步组件技术实现路由懒加载?
12 1
vue3中使用router路由实现跳转传参
vue3中使用router路由实现跳转传参
|
11天前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
|
14天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
19天前
|
JavaScript 数据安全/隐私保护 UED
导航守卫(全局,组件,路由独享)都有什么作用导航守卫在 Vue Router 中扮演着重要的角色,不同类型的导航守卫有着不同的作用:1. **全局导航守卫**: - **作用**:
导航守卫(全局,组件,路由独享)都有什么作用导航守卫在 Vue Router 中扮演着重要的角色,不同类型的导航守卫有着不同的作用:1. **全局导航守卫**: - **作用**:
9 0
|
1月前
|
JavaScript
在vue中,如何实现SPA单页面应用的路由管理?
在vue中,如何实现SPA单页面应用的路由管理?
21 2
|
1月前
|
JavaScript UED
vue路由拦截
vue路由拦截
16 4