Vue 动态添加路由 - LD's BLOG

本文将介绍在 Vue 中使用动态添加路由这一技术点时，遇到的问题及其解决方案。

一、动态添加路由

1. 什么是动态添加路由？

有些时候，希望路由映射并非一开始便写死在 js 文件之中，而是在运行过程中动态添加。

Vue Router 提供了 addRoutes() 方法，可以用于完成这一需求。

2. 使用场景

待用户登录完成后，才为用户添加除登录和注册以外的路由
在运行时，根据用户类型，动态添加权限路由

二、动态添加的路由刷新后丢失

1. 问题

在开发中，动态添加路由，路由能够被顺利添加并访问，但刷新页面后路由便会丢失，页面显示白屏。

2. 产生原因

动态添加的路由将会在页面刷新后丢失。

3. 解决思路

检测页面是否刷新，一旦页面刷新，便重新添加路由。

4. 注意点

由于 Vuex 和动态添加的路由一样，会在刷新后丢失，因此可以检测 Vuex 中数据的状态，从而间接检测页面是否刷新
不应在动态添加路由后便放行，而是应该在路由添加完成之后再放行

三、解决方法

1. 做法

通过全局前置守卫路由，在每次路由跳转之前拦截
由于动态添加的路由将会在刷新页面后消失，因此需要判断页面是否刷新，如果页面发生了刷新，应该重新添加路由
由于 Vuex 中的数据同样会在刷新后丢失，因此可以借助 Vuex 进行页面刷新的判断
由于路由的动态添加需要时间，因此不应该直接添加路由并放行，而是应该通过 next({ ...to, replace: true }) 在路由被成功添加之前不断跳转进入新的导航，等待路由被添加

2. 示例代码

Vue.use(Router)

const routes = [
    ···路由映射表··· 
]

const router = new Router({
    routes
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {

    // 获取需要被动态挂载的路由映射表
    let dynamicRoutes

    // 如果从未动态添加路由，或页面发生了刷新，则Vuex中的数据将为默认值
    if (Vuex中的数据为默认值) {
        
        // 修改Vuex中的数据
		···
        
        // 动态添加路由
        router.addRoutes(dynamicRoutes)

        // 确保路由添加后才进行放行
        next({ ...to, replace: true })
    }

    // 无需添加，直接放行
    next()
})

export default router

3. next({ …to, replace: true })

(1) next()

next() 代表放行

next('/路径') 代表跳转至指定路径

next({path: '/路径', ···}) 代表跳转至指定路径，可以在对象中设置诸如 replace: true、name: 'home' 等选项

next(...) 将会中断当前的导航，并进入新的导航，因此新的导航也会被导航守卫拦截。