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

冷不防 2023-06-27 03:08 8阅读 0赞

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

在页面刷新时候，在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;