自用复习：动态路由页面刷新之后空白

问题

添加动态路由页面刷新之后空白，刷新后打印所有路由状态还在。

解决方法

在注册router的时候就将所有的动态路由添加进来。

这是最符合业务需求和业务逻辑的并且高效的方式。这里在代码的基础上说思路，不针对技术选型：

一般的动态路由流程三件套： 【获取后端数据】【封装格式化路由方法】【调用方法生成路由】

【获取后端数据】：这一步获取的是系统的菜单的数据^[1]，作用有两【展示菜单目录】【生成动态路由】。获取成功之后存储在store里头，方便获取。将数据存到storage中。

state: {
    menu: [],
}
mutations: {
    SET_MENU: (state, params = {}) => {
        let { menu, type } = params;
        state.menu = menu;
        // 设置Storage存储
        setStore({
            name: 'menu',
            content: menu
        });
    },  
},
actions: {
    // 获取系统菜单
    GetMenu({ commit }, obj) {
        return new Promise((resolve) => {
            getMenu(obj.id).then((res) => {
                const data = res.data;
                // 可以将拿到的数据做个深拷贝
                const menu = deepClone(data);
                commit('SET_MENU', { menu,type });
                resolve(menu);
            });
        });
    },
}

【封装格式化路由方法】：转化的方法和数据的有直接关系这里不做赘述。

【调用方法生成路由】：

// router.js

import { createRouter, createWebHashHistory } from 'vue-router';
import PageRouter from './page/';
// import ViewsRouter from './views/'
import EvaRouter from './eva-router';
import store from 'uums/store';

const router = createRouter({
	history: createWebHashHistory(),
	routes: [...PageRouter]
});
EvaRouter.install(router, store);
// 这里调用生成动态路由方法，下面方法的功能是将获取的路由数据格式化并添加进路由
router.$evaRouter.formatRoutes(store.state.user.menu, true);
export default router;

当页面刷新或者是第一次挂载就会调用router生成router的实例化对象。当没有路由菜单数据的时候，这个方法不会影响路由的正常运行。

这个方法的根本技巧是storage,菜单利用刷新前缓存在storage的menu数据直接在创建router实例化对象时使用，用上一次刷新的旧数据先生成一套动态路由供页面跳转，在页面挂载后又获取新的数据menu数据，生成新的动态路由，供打开下一个路由使用。

这样就有一个不足的地方：在修改路由的数据之后刷新页面，页面获取的动态路由依旧用的时没有改路由之前的数据，想要更新路由的数据则需要再刷新一次。即menu数据变化之后需要刷新两次获取新的动态路由。

整体的逻辑如下：

问题解释：我们拿到的菜单数据之后会将数据格式化，然后将格式化之后符合添加的路由的数据通过VueRoute内置的APIaddRoute^[2]添加动态路由,在路由守卫中获取动态路由

RouterPlugin.install = function (router) {
   router.addRoutes = (routers)=>{
       routers.forEach(function(route){
           router.addRoute(route);
       })
   }
}

---

1. 我们通常会将这个数据存到storage中，刷新后数据依旧在storage中 ↩︎

2. (vueRouter4版本没有暴露addRoutesAPI，可以利用已经存在的addRoute自己封装一个方法，在初始化路由的时候将该方法添加到vueRouter4的实例化对象中)。 ↩︎