vue3 动态添加路由 router.addRoute() 时遇到的问题

在 vue-router@4 版本中取消了 router.addRoutes() 方法，改用 router.addRoute() 方法，来动态添加路由。

空白页问题

为什么会出现空白页？那是因为在路由跳转的时候，路由可能还没有被加载，此时就会出现进入到空白页。所以需要通过 next({...to, replace: true}) 来进行一个重定向，将当前路由替换成新的路由。

但是，这种方式仅限于常量路由中没有全局404页面，如果常量路由中有全局404页面，那么在路由加载的时候，就会跳转到404页面。如下：

const constantRoutes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/Login.vue'),
    },
    {
        path: '/:catchAll(.*)',
        name: '404',
        component: () => import('@/views/404.vue'),
    }
]

需要通过 next(to.fullPath) 来进行重定向，将当前路由的完整路径进行重定向，这样就可以避免进入到404页面。

// /router/permission.js
let isFirst = flase
export function setupPageGuard(router) {
    router.beforeEach((to, from, next) => {
        // 判断是否登录
        if (!getToken()) {
            if (to.path == '/login') return next()
            return next('/login')
        }

        // 判断是否是第一次进入页面，第一次进入的时候进行动态路由添加
        if (!isFirst) {
            isFirst = true
            // 在这里进行动态路由添加
            asyncRoutes.forEach(route => router.addRoute(route))

            // 由于常量中有一个通用路由，如果还是使用 next(...to, {replace: true}) 就会导致跳转到 404 页面，所以需要使用 next(to.fullPath) 来跳转到当前路由的完整路径
            next(to.fullPath)
        } else {
            next()
        }
    })
}

参考

• https://juejin.cn/post/7242873112751407161