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

Question

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

Answer 1

// 路由配置文件
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>