【开发日记】Vue2动态路由踩坑指南

前言

背景是对一个Vue2的老项目进行动态路由改造，原来是静态路由。

踩坑指南

1、component中的@符号不能由服务端返回，因为很可能会识别成其他内容。

component = () => import(`@/${route.component}`);

**2、**子路由的path不能以/开头，根路由的path必须以/开头。

**3、**使用router.addRoute(route)来动态添加路由。

import router from "@/core/router";
...
router.addRoute(route);

实现步骤

1、创建vue-router对象

以下是router.js内容。

import Vue from "vue";
import Router from "vue-router";
export const constantRoutes[...公共静态路由...];
export default new Router({
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes,
    base: "/"
})

2、初始化Vue

正常通过new创建Vue对象，main.js示例如下：

import router from '@/core/router.js'
import Vue from 'vue'
import App from './App.vue'

let vue=new Vue({
      router,
      render: h => h(App),
}).$mount('#app');

3、动态添加路由

addRoutes: function (routes) {
    return new Promise((resolve, reject) => {
        try {
            routes.forEach(item => {
            	//addRoute函数时自定义的，根据自己的业务逻辑编写 
                let route = this.addRoute(item); 
                router.addRoute(route);
            });
            resolve(); // 所有路由添加完成后调用 resolve()
        } catch (error) {
            reject(error); // 如果发生错误调用 reject()
        }
    });
},

4、添加动态路由的时机

存在三个添加动态路由的时机。

第一个是当前用户登录成功后获取当前用户拥有的权限页面路由进行添加。

第二个是刷新了网页后动态路由会被清空，此时应监听刷新页面并重新添加。

第三个是第一次打开页面，但无需重新登录（记住登录状态）需要重新添加路由。

5、监听页面刷新

在监听页面刷新时应判断是否符合刷新路由的条件，比如本地缓存中没有路由信息。在下一次切换界面时即调用添加动态路由的方法。

window.onbeforeunload = function () {//刷新会触发这个事件  
    if(判断是否符合条件){
        // 写入缓存表示需要更新路由
      	sessionStorage.setItem("RefreshRouter", false);
    }
};

6、设置路由前置守卫配置

设置路由前置守卫配置主要就是用来监听用户切换界面，如果用户在切换界面之前刷新了浏览器，那么系统需要在用户切换界面之前重新添加动态路由。

router.beforeEach((to, from, next) => {
      RouterUtils.refreshRouter(router,to).then(() => {
            // 其他逻辑
            next()
      })
});

在refreshRouter函数中判断RefreshRouter缓存是否需要重新添加路由。

结语

本人主攻方向是后端，此流程不一定是最优解，也可能存在一些问题，欢迎留言讨论。