vue3动态路由导航菜单js

### Vue3 动态路由导航菜单实现方法 #### 1. 初始化项目结构 在 `src` 文件夹下，存在两个主要文件用于配置应用的基础设置和路由逻辑：`main.js` 和 `router/index.js`[^1]。 ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` #### 2. 定义静态路由 为了确保某些页面始终可访问（例如登录页），这些页面应作为静态路由被提前定义好。这部分通常位于 `router/index.js` 中： ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router' import LoginView from '../views/LoginView.vue' // 登录界面视图组件 const routes = [ { path: '/login', name: 'Login', component: LoginView, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router; ``` #### 3. 获取并解析后端返回的动态路由数据 当用户成功登录之后，从前端向服务器请求获取该用户的权限信息以及对应的菜单列表。假设服务端响应如下所示 JSON 数据格式： ```json [ {"path":"/dashboard","name":"Dashboard","component":"Dashboard"}, {"path":"/profile","name":"Profile","component":"UserProfile"} ] ``` 这段代码展示了如何接收来自 API 的响应，并将其转换成适合添加至路由器的对象数组形式[^2]。 #### 4. 注册新的动态路由 一旦获得了上述格式化的路由对象集合，则可以利用 `addRoute()` 方法逐一加入到现有路由表内。注意，在此之前应当先移除任何可能存在的重复项以防止冲突发生[^3]。 ```javascript async function addDynamicRoutes() { const response = await fetch('/api/user/routes'); let dynamicRoutes = await response.json(); // 清理已有的相同路径名的路由条目 dynamicRoutes.forEach(route => removeExistingRouteByName(route.name)); // 添加新路由 dynamicRoutes.forEach((route) => { router.addRoute({ ...route, meta: { requiresAuth: true }, // 假设所有新增加的路由都需要认证 components: () => import(`@/components/${route.component}.vue`) }); }); // 执行跳转操作使最新添加的路由生效 router.push({ name: dynamicRoutes[0].name }); } ``` #### 5. 处理默认路由与动态路由之间的潜在重叠情况 如果发现有相同的名称或路径存在于既定好的固定链接之中，那么应该优先保留后者；即允许自动生成的内容覆盖原有的设定。