本文共 2833 字，大约阅读时间需要 9 分钟。

Vue Router动态路由配置及菜单加载

基于 Vue Router 开发的路由配置方案，重点包括动态路由生成及菜单信息管理。以下是详细的实现说明和相关技术可用性。

一、项目依赖

项目中采用了以下技术框架：

• Vue.js: 前端框架
• Vue Router: 路由管理工具
• NProgress: 逛度条插件
• Vuex: 状态管理工具

这些框架共同用于构建高效的前端应用程序。

二、路由配置与默认白名单

路由配置文件为 routers/routes.js，定义如下：

// routes.js
import Vue from 'vue'
import Router from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
import api from '@/api'
Vue.use(Router)
const router = new Router({
  routes: [
    // home 路由配置
    { path: '/home', name: 'home', component: () => import('@/views/home/home.vue'), children: [] },
    // login 路由配置
    { path: '/login', name: 'login', component: () => import('@/views/login/login.vue') },
    // 错误页面
    { path: '/error', name: 'error', component: () => import('@/views/error.vue') },
  ],
})
// Whitelist definitions for redirect negation (可自定义白名单)
const whiteList = ['/login', '/authredirect']
// 全局钩子处理未授权访问
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const userName = localStorage.getItem('user')
  // 开启进度条
  NProgress.start()
  if (token !== 'undefined') {
    if (to.path === '/login') {
      // 已登录用户访问登录页面时，跳转到主页
      next({ path: '/home' })
      NProgress.done()
    } else {
      // 加载动态菜单并 JWT 验证通过
      addDynamicMenuAndRoutes(userName, to, from)
      NProgress.done()
    }
  } else {
    // 未登录状态处理
    if (whiteList.includes(to.path)) {
      // 允许访问的路径直接通过
      next()
      NProgress.done()
    } else {
      // 未授权访问，跳转到登录页面
      next({ path: '/login' })
      NProgress.done()
    }
  }
})
// 总结ニニ──┬─────┬─────────
// 全局钩子中修改了哪些内容：增加了 NProgress 对进度条的控制逻辑
// 进度条完成处理
router.afterEach(() => {
  NProgress.done()
})

三、动态菜单加载

菜单动态加载主要通过 addDynamicMenuAndRoutes 函数实现，该函数基于用户信息从 API 获取菜单数据，并动态生成路由。步骤如下：

四、菜单组件实现

菜单树组件 MenuTree.vue 所在位置为：

五、组件使用场景

该菜单组件主要用于管理导航栏和菜单栏，适用于多层级菜单结构，支持动态加载菜单。

样例使用：

# 在主应用组件中使用
   

六、错误处理

系统级错误处理采用全局钩子机制，确保每个路由跳转都能正确处理：

// routes.js
router.beforeEach((to, from, next) => {
  // ... 前一个族谱处理逻辑 ...
  if (to.path === '/login') {
    // 已登录用户访问登录界面时自动跳转到主页
    if (token) {
      next({ path: '/home' })
    } else {
      next()
    }
  } else {
    if (!token) {
      // 未登录访问其他页面自动跳转
      next({ path: '/login' })
    } else {
      // 加载动态菜单
      addDynamicMenuAndRoutes(userName, to, from)
      next()
    }
  }
})

七、性能优化

• 进度条处理：通过 NProgress 解决路由跳转时的进度反馈，提升用户体验。

• 静态组件配置：动态加载相关组件的路由配置，确保框架代码的灵活性。

• 状态管理：使用 Vuex 状态管理，实现菜单树的无状态化请求，提升组件共享性。

展望未来，这个实现可以通过进一步优化动态路由生成算法，提升菜单加载效率，同时探索前后端分离的解决方案，提高组件层次结构和代码可维护性。