vue动态路由来生成系统菜单 解决刷新空白的问题

由于子路由都是动态追加的，当界面刷新的时候，其实我们路由里面并没有该子界面的配置，所以就是空白了

在页面刷新时候，在router.beforeEach里面去判断，如果是动态路由而且是第一次加载，则动态追加该路由，再进行界面的跳转。

我的思路：在页面刷新或是第一次加载进来时，创建一个变量，然后在 router.beforeEach 里面进行判断。（这里是模拟的数据，所以省略请求接口操作）

import App from './App'
import Vue from 'vue'
import util from './util/util'
import router from './router'

//  拦截 
var qq = false; // 页面刷新货初次加载 才会执行这个变量
var arr = [
  {
    booktitle:'用户管理',
    authUrl:'/readinguser',
    icon:'iconyonghuguanli2'
  },
  {
    booktitle:'管理书籍',
    authUrl:'/managementBooks',
    icon:'iconshu2'
  },
]
router.beforeEach((to,from,next) => {
// 当 qq 为false 表示 刷新了 或 第一次加载  
  if(!qq){
    qq = true; // 先让他变 true 不然跳转页面时会死循环
// 拿到数据后 就是把数据push到父组件里  
//  util.extendRouters 自己写的方法 
    util.extendRouters(arr).forEach(element => {
      router.options.routes[0].children.push(element);
    });

    router.addRoutes(router.options.routes);
    next(to.path);
  }
  console.log('store.state.login:',sessionStorage.getItem('login'));
  if(sessionStorage.getItem('login')){
    if(to.path === '/login'){
      sessionStorage.removeItem('login');
      next('/login');
    }else {
      next();
    }
    
  }else {
    if(to.path === '/login'){
      next()
    }else {
      next('/login');
    }
  }
})

util.js  文件：

import Vue from 'vue';

let util = {
    title:function (title) {
        title = title ? title + ' | 书籍管理' : '书籍管';
        window.document.title = title;
    },
    S4:function () {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    },
    //产生唯一ID
    guid:function () {
        return (util.S4()+util.S4()+util.S4()+util.S4()+util.S4()+util.S4()+util.S4()+util.S4());
    },
    getRootPath:function () {
        //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
        let curWwwPath=window.document.location.href;
        //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        let pathName=window.document.location.pathname;
        let pos=curWwwPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:8083
        return curWwwPath.substring(0,pos);
    },
    extendRouters:function(data) {
        let child = new Array(0);
        for (let item in data) {
            if (data.hasOwnProperty(item)) {
                if (data[item].authUrl) {
                    child.push(
                        {
                            path: data[item].authUrl,
                            component: resolve => {
                                require.ensure([], (require) => {
                                    resolve(require('../components/view' + data[item].authUrl + '.vue'))
                                })
                            }
                        }
                    );
                }
                if (data[item].list && data[item].list.length > 0) {
                    for (let childItem in data[item].list) {
                        if (data[item].list.hasOwnProperty(childItem) && data[item].list[childItem] && data[item].list[childItem].authUrl) {
                            child.push(
                                {
                                    path: data[item].list[childItem].authUrl,
                                    component: resolve => {
                                        require.ensure([], (require) => {
                                            resolve(require('../components/view' + data[item].list[childItem].authUrl + '.vue'))
                                        })
                                    }
                                }
                            );
                        }
                    }
                }
            }
        }

        //匹配不到
        child.push({path: '*', component: Vue.extend({template: '<div style="font-size:28px;padding:10px 20px;color:#bc7c7d;margin-top:20%;">404 page not found</div>'})});

        return child;
    },
    replaceAll:function(src,f,e) {
        let reg=new RegExp(f,"g"); //创建正则RegExp对象
        return src.replace(reg,e);
    }
};

export default util;