Vue3实现动态路由与手动导航

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: '分类列表' },
  },
];

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;
};

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();
});