Element plus菜单导航跳转

Element Plus是一个基于Vue 3.x的Admin UI组件库，它提供了一套丰富的界面组件，其中包括菜单导航系统。在Element Plus中，菜单导航主要用于组织页面结构和管理URL之间的映射。要实现导航之间的跳转，你可以按照以下步骤操作：

1. 首先，在`src/router`目录下创建路由配置文件，如`router/index.js`。在这个文件中，你可以定义你的导航菜单及其对应的路径。例如：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
// ... 其他视图组件

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      // 子菜单配置
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: () => import('@/views/Dashboard.vue'),
      },
      // 更多子菜单...
    ],
  },
];

const router = createRouter({
  history: createWebHistory(), // 使用web History API
  routes,
});

export default router;

2. 然后，在需要跳转的地方，通常是在`<template>`标签内，你可以使用`router-link`组件来链接到指定的菜单项：

<el-menu :default-active="$route.path" class="el-menu-demo">
  <el-menu-item index="/">首页</el-menu-item>
  <el-menu-item index="/dashboard">仪表盘</el-menu-item> <!-- 这里会自动匹配路由 -->
</el-menu>

<!-- 路由跳转 -->
<el-button @click="goTo('/dashboard')">跳转到仪表盘</el-button>
<script setup>
import { useRouter } from 'vue-router';

function goTo(path) {
  router.push({ path });
}
</script>