Vue 3 动态路由与手动导航实现

在后台管理系统中，前端的路由往往需要根据用户的权限动态生成。这篇文章将重点介绍如何在 Vue 3 中实现动态路由注册 和手动导航，确保用户访问的页面与权限对应。

1. 动态路由的需求与原理

为什么需要动态路由？

• 权限控制：不同用户角色需要看到不同的菜单和页面。
• 后端驱动：后端返回菜单数据，前端动态渲染菜单和注册路由。
• 避免硬编码：路由不再写死在前端代码里，保证灵活性。

动态路由的原理

1. 静态路由：定义公共页面，如登录页和404页面。
2. 动态路由：存储需要通过后端数据动态添加的页面。
3. 动态注册路由 ：根据后端返回的数据，通过 router.addRoute 动态添加到路由系统。
4. 手动导航：添加新路由后，需要手动触发导航以保证路由生效。

2. 静态路由与动态路由配置

静态路由

静态路由是所有用户共享的基本路由，如登录页、404页等。

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import Layout from '@/layout/admin.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Layout,
    name: 'admin',
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/pages/login/index.vue'),
    meta: { title: '登录页' },
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/pages/404/index.vue'),
    meta: { title: '404' },
  },
];

动态路由

动态路由需要根据后端返回的数据进行注册：

const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: '/',
    component: () => import('@/pages/index/index.vue'),
    meta: { title: '首页' },
  },
  {
    path: '/goods/list',
    name: '/goods/list',
    component: () => import('@/pages/goods/list.vue'),
    meta: { title: '商品列表' },
  },
  {
    path: '/category/list',
    name: '/category/list',
    component: () => import('@/pages/category/list.vue'),
    meta: { title: '分类列表' },
  },
];

3. addRoutes 实现动态路由注册

addRoutes 方法

该方法接收后端返回的菜单数组，并将匹配的动态路由添加到主路由 admin 下。

import { router } from '@/router/index';

export const addRoutes = (routesArray: Array<MenusArray>) => {
  let hasNewRoutes = false;

  const addRoutesFromMenus = (menus: Array<MenusArray>) => {
    menus.forEach((menu) => {
      // 查找匹配的动态路由
      const route = asyncRoutes.find((r) => r.path === menu.frontpath);
      // 添加到router中
      if (route && !router.hasRoute(route.path)) {
        router.addRoute('admin', route);
        hasNewRoutes = true;
      }
      // 递归处理子菜单
      if (menu.child && menu.child.length > 0) {
        addRoutesFromMenus(menu.child);
      }
    });
  };

  addRoutesFromMenus(routesArray);
  return hasNewRoutes;
};

解释

1. router.addRoute：Vue Router 提供的 API，可以动态添加路由。
2. 避免重复添加 ：router.hasRoute 检查路由是否已存在，防止重复注册。
3. 递归处理 ：支持多级菜单，递归遍历 child 子菜单。

4. 路由守卫中调用 addRoutes

在 router.beforeEach 路由守卫中，调用 addRoutes 注册动态路由，并实现手动导航。

import { getToken } from '@/utils/auth';
import store from '@/store';
import { addRoutes } from '@/router/index';

router.beforeEach(async (to, from, next) => {
  const token = getToken();
  let hasNewRoutes = false;

  // 显示全局加载状态
  showFullLoading();

  // 未登录跳转到登录页
  if (!token && to.name !== 'login' && to.name !== 'NotFound') {
    return next('/login');
  }

  // 已登录访问登录页，重定向到主页
  if (token && to.name === 'login') {
    return next('/');
  }

  // 已登录状态下，动态添加路由
  if (token) {
    await store.dispatch('user/getUserInfo'); // 拉取用户信息
    hasNewRoutes = addRoutes(store.getters['menu/getMenus']); // 添加动态路由
  }

  // 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title}-测试后台管理`;
  } else {
    document.title = '测试后台管理';
  }

  // 手动导航：如果添加了新路由，重新跳转当前页面
  hasNewRoutes ? next(to.fullPath) : next();
});

手动导航的必要性

• router.addRoute 是动态操作，添加新路由后需要重新跳转一次，确保用户能正常访问新注册的页面。
• next(to.fullPath)：手动跳转到当前页面。

5. 完整流程

1. 用户登录 ：获取用户 token，拉取用户信息。
2. 获取菜单数据：后端返回用户权限对应的菜单数据。
3. 动态注册路由 ：调用 addRoutes 将菜单数据匹配的路由添加到 admin 下。
4. 手动导航 ：动态路由添加完成后，使用 next(to.fullPath) 手动触发页面跳转。
5. 权限生效：用户只能访问与自己权限匹配的页面。

6. 总结

• 静态路由：用于公共页面。
• 动态路由 ：后端驱动，通过 addRoutes 动态注册。
• 手动导航：解决动态添加路由后无法直接访问的问题。
• 灵活性：动态路由使前端代码更灵活，后端控制权限更方便。

明白了！这里是一个适合博客结尾 的自我介绍和求关注模板，简洁且能体现个人特色：

---

📢 关于作者

嗨！我是头发秃头小宝贝，一名热爱技术分享的开发者，专注于Vue / 前端工程化 / 实战技巧 等领域。

如果这篇文章对你有所帮助，别忘了 点赞 👍 、收藏 ⭐ 和 关注 👏，你的支持是我持续创作的最大动力！