vue中路由的高亮菜单可以动态配置吗，然后点击不同菜单进入这个组件页面，想让左侧菜单高亮需要动态配置activeMenu

vue中路由的高亮菜单可以动态配置吗，因为这是一个公共页面，然后点击不同菜单进入这个组件页面，想让左侧菜单高亮需要动态配置activeMenu

img


// 路由配置文件
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
      title: '首页',
      icon: 'el-icon-s-home'
    }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: {
      title: '关于',
      icon: 'el-icon-s-marketing'
    }
  },
  // ...
]

// 公共页面组件
<template>
  <div>
    <div v-for="route in $router.options.routes" :key="route.path">
      <el-menu-item :index="route.path" :class="{ 'is-active': $route.path === route.path }">
        <i :class="route.meta.icon"></i>
        <span slot="title">{{ route.meta.title }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonPage',
  data() {
    return {}
  }
}
</script>
  • 以下回答由chatgpt基于相关博客总结生成:

    解决方案：

    针对您的问题，需要在路由js文件中配置 linkActiveClass，然后在使用 时加上 active-class 属性。如果出现两个router-link同时激活的问题，可以加上 exact 属性或者在路由中加入重定向。

    具体步骤如下：

    1. 在路由js文件中配置 linkActiveClass：
    export default new Router({
  linkActiveClass: 'active'
})

    这里的 active 为你需要设置的选中样式的类名。

    1. 在 中加上 active-class 属性：
    <router-link to="/home" class="menu-home" active-class="active">首页</router-link>

    这里的 active-class 即为上面设置的选中样式的类名。

    1. 如果出现两个router-link同时激活的问题，可以加上 exact 属性：
    <router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

    这里的 exact 属性可以确保只有路径完全匹配时才会激活选中状态。

    另外，还可以在路由中加入重定向，将不需要选中状态的路径重定向到需要选中状态的路径：

    {
  path: '/',
  redirect: '/home'
}

    这样就能够动态配置路由高亮菜单，并且在点击不同的菜单时进入其对应的组件页面，左侧菜单也能够实现动态的高亮效果了。

img