vue3+vite+vue-router4.x实现动态添加路由

实现内容：

        1.根据后台返回的菜单，前端实现动态添加路由；

        2.解决刷新页面时，路由消失/页面空白的问题；

第一步：请求后台，返回菜单数据【内容如下】

1.  
   // 后台返回的菜单数据
2.  
   this.menuList = [
3.  
   { id: 1, path: '/home', name: '首页', icon: true, children: [], component: '/home/home' },
4.  
   { id: 12, path: '/pinia', name: 'pinia的使用', icon: true, children: [], component: '/pinia/pinia' },
5.  
   { id: 2, path: '/menu', name: '递归菜单页面', icon: true, children: [], component: '/recursion-menu/recursion-menu' },
6.  
   { id: 3, path: '/test', name: '测试', icon: true, children: [], component: '/test/test' },
7.  
   {
8.  
   id: 10,
9.  
   path: '/permisson',
10.  
    name: '权限管理',
11.  
    icon: true,
12.  
    children: [
13.  
    { id: '10-1', path: '/user', name: '用户管理', children: [], component: '/promission/user-manage' },
14.  
    { id: '10-2', path: '/role', name: '角色管理', children: [], component: '/promission/roles-manage' }
15.  
    ]
16.  
    }
17.  
    ]

第二步：根据菜单数据，动态添加到路由信息中

1.静态路由【routes.ts文件】

1.  
   import { RouteRecordRaw } from 'vue-router'
2.  
    
3.  
   const Login = () => import('@/views/login/login.vue')
4.  
   const Home = () => import('@/views/home/home.vue')
5.  
   const Layout = () => import('@/layout/layout.vue')
6.  
   const Page404 = () => import('@/views/error/page404.vue')
7.  
    
8.  
   // 基础路由，不需要设置权限
9.  
   export const basicRoutes:RouteRecordRaw[] = [
10.  
    {
11.  
    path: '/login',
12.  
    name: 'login',
13.  
    component: Login
14.  
    }, {
15.  
    path: '/',
16.  
    name: 'layout',
17.  
    component: Layout,
18.  
    meta: {
19.  
    requiresAuth: true // 在这里设置，表示layout下边的子路由全部需要登录才能访问
20.  
    },
21.  
    redirect: '/home',
22.  
    children: [
23.  
    {
24.  
    path: '/home',
25.  
    name: 'home',
26.  
    component: Home
27.  
    }
28.  
    ]
29.  
    }, {
30.  
    path: '/:pathMatch(.*)',
31.  
    name: 'page404',
32.  
    component: Page404
33.  
    }
34.  
    ]

2.基础路由信息【index.ts】

1.  
   import { createRouter, createWebHashHistory } from 'vue-router'
2.  
   import { basicRoutes } from '@/router/routes'
3.  
   import { App } from 'vue'
4.  
   import { setupRouterHooks } from '@/router/routerHooks'
5.  
    
6.  
   export const router = createRouter({
7.  
   history: createWebHashHistory(),
8.  
   routes: basicRoutes
9.  
   })
10.  
     
11.  
    export function setupRouter (app: App<Element>): void {
12.  
    // 路由钩子函数
13.  
    setupRouterHooks()
14.  
    app.use(router)
15.  
    }
16.  
     
17.  
    export default router

 3.将数据动态添加到路由信息中【routerHooks.ts文件】

1.  
   addRoutes(this.menuList) // 此处的menuList为上述中返回的数据
2.  
    
3.  
    
4.  
   import { router } from '@/router/index'
5.  
   import type { MenuItem } from '@/pinia/modules/menu'
6.  
   import { RouteRecordRaw } from 'vue-router'
7.  
    
8.  
   // vue3 vite中的动态引入组件的方法
9.  
   const loadView = import.meta.glob('../views/**/*.vue')
10.  
     
11.  
    // 动态添加路由
12.  
    export function addRoutes (menu: MenuItem[]) {
13.  
    menu.forEach(e => {
14.  
    // 只将页面信息添加到路由中
15.  
    if (!e.children || e.children.length === 0) {
16.  
    router.addRoute('layout', { name: e.path.slice(1), path: e.path, meta: { title: e.name }, component: loadView[`../views${e.component}.vue`] })
17.  
    } else {
18.  
    addRoutes(e.children)
19.  
    }
20.  
    })
21.  
    }

第三步：添加路由钩子，解决页面刷新，路由消失的问题【routerHelper.ts】

1.  
   import { router } from '@/router/index'
2.  
   import nprpgreee from 'nprogress'
3.  
   import 'nprogress/nprogress.css'
4.  
   import { useMenuStoreWithOut } from '@/pinia/modules/menu'
5.  
    
6.  
   const menuStore = useMenuStoreWithOut()
7.  
    
8.  
   export function setupRouterHooks () {
9.  
   router.beforeEach((to, from, next) => {
10.  
    nprpgreee.start() // 开始加载进度条
11.  
    if (to.path === '/login') {
12.  
    next()
13.  
    } else {
14.  
    // 页面刷新时，重新加载路由
15.  
    if (menuStore.menuList.length === 0) {
16.  
    menuStore.setMenuList()
17.  
    next({ path: to.path })
18.  
    // next({ ...to, replace: true }) //此方法不生效
19.  
    } else {
20.  
    next()
21.  
    }
22.  
    }
23.  
    })
24.  
    router.afterEach(() => {
25.  
    nprpgreee.done()
26.  
    })
27.  
    }

这篇好文章是转载于：学新通技术网