el-menu +vue2实现动态跳转路由

在Vue2中使用el-menu组件实现动态跳转路由的步骤如下：

1. 在Vue组件中引入el-menu组件和Vue-router路由组件。
2. 在数据中定义菜单项及其对应的路由链接，例如：

   data() {
     return {
       menuItems: [
         { title: '首页', route: '/home' },
         { title: '关于我们', route: '/about' },
         { title: '产品', route: '/product' },
       ],
     };
   },

3. 使用v-for指令遍历菜单项，渲染el-menu组件的el-menu-item属性：

   <template>
     <el-menu router>
       <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route">{{ item.title }}</el-menu-item>
     </el-menu>
   </template>

4. 在Vue实例中配置Vue-router路由表，为每个菜单项的路由链接添加对应的组件：

   const routes = [
     { path: '/home', component: Home },
     { path: '/about', component: About },
     { path: '/product', component: Product },
   ];

   const router = new VueRouter({
     routes,
   });

5. 在Vue实例中将Vue-router插入到Vue实例中，使得el-menu组件的路由功能生效：

   const app = new Vue({
     router,
   }).$mount('#app');

这样，当用户点击el-menu组件中的菜单项时，Vue-router会根据路由配置跳转到对应的组件页面，实现动态的路由跳转。