el-menu的router用法

`el-menu` 是 Element UI 提供的一个用于创建导航菜单组件，常用于单页面应用(Single Page Application, SPA)中，它可以根据路由数据动态生成菜单项。在 Vue.js 中结合 `vue-router` 使用，可以实现菜单跟随路由变化而更新显示内容。

基本用法如下：

1. 安装依赖：
首先确保已经安装了 Element UI 和 vue-router。在项目中运行 `npm install element-ui vue-router` 或者 `yarn add element-ui vue-router`。

2. 引入组件：
在 Vue 组件中导入 `ElMenu` 和 `ElMenuItem`：

import { ElMenu, ElMenuItem } from 'element-ui';

3. 创建路由：
在 `main.js` 或其他配置文件中配置路由：

import Router from 'vue-router';
import Home from '@/views/Home.vue'; // 示例路由

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      // 更具体的路由配置...
    ]
  }
];

const router = new Router({
  routes
});

// 然后需要在Vue实例上挂载router
new Vue({
  router,
}).$mount('#app');

4. 在模板中使用 el-menu：

<template>
  <div id="app">
    <el-menu :default-active="$route.path" class="el-menu-demo">
      <el-menu-item v-for="(item, index) in routes" :key="index" :to="{ path: item.path }">
        {{ item.meta.title }} <!-- 如果有meta信息可以用这个展示 -->
      </el-menu-item>
    </el-menu>
    <router-view></router-view> <!-- 渲染当前路由对应的组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      routes: router.options.routes, // 获取已配置的路由数组
    };
  },
};
</script>

在这个例子中，`default-active` 属性设置为 `$route.path`，表示默认选中与当前路由匹配的菜单项。当用户点击菜单时，会触发跳转到相应的路由。