所遇问题：vue的pc端项目每次扫码登录的时候需要清除缓存才能登录成功

先贴几个登录时的效果图

如图红色箭头标记的部分，第一次打开项目时，没有进行清除缓存的操作，扫码后，可以看到拿到了我的个人信息
在用完手机扫码成功以后 点击箭头标记的对应企业，完成确定的登录授权

清除完缓存后可以登录进去查看页面

清完缓存就可以登录了，我用红色框标记的左边的菜单栏导航，是通过动态配置添加的，根据角色编辑对应的菜单数量权限，这块用到的是vue 的动态路由添加方法addrouter方法进行添加的，存放到了vux里面。

对于这个问题自己的总结

1.该项目虽然是vue项目，但是经历多个前端前辈的堆积，已经十分臃肿
2.是不是因为这些菜单的路由结构全部都存放到vux里面，导致容量太多，
每次修改配置完左边的菜单栏导航数量，都要先清除缓存才能生效。

贴一下对应的动态添加菜单蓝导航的代码

1.
2.此处帖的代码块是，菜单路由的数据结构以及动态添加生成的js方法
在这里插入代码片import Vue from ‘vue’
import VueRouter from ‘vue-router’
const Layout =() => import( /* webpackChunkName: “Home” / ‘…/views/Layout.vue’)
const Home = () => import( / webpackChunkName: “Home” / ‘…/views/Home.vue’)
const About = () => import( / webpackChunkName: “Home” / ‘…/views/About.vue’)
const Login = () => import( / webpackChunkName: “Home” / ‘…/views/Login.vue’)
const Register = () =>
import( / webpackChunkName: “Home” / ‘…/views/Register.vue’)
const Workorder = () =>
import( / webpackChunkName: “Home” / ‘…/views/Workorder.vue’)
const Financial = () =>
import( / webpackChunkName: “Home” / ‘…/views/Financial.vue’)
const Notice = () =>
import( / webpackChunkName: “Home” / ‘…/views/Notice.vue’)
const Heatmap = () =>
import( / webpackChunkName: “Home” / ‘…/views/Heatmap.vue’)
const Account = () =>
import( / webpackChunkName: “Home” / ‘…/views/Account.vue’)
const Role = () =>
import( / webpackChunkName: “Home” / ‘…/views/Role.vue’)
const Operationlog = () =>
import( / webpackChunkName: “Home” / ‘…/views/Operationlog.vue’)
const Reportform = () =>
import( / webpackChunkName: “Home” / ‘…/views/Reportform.vue’)
import( / webpackChunkName: “Home” / ‘…/views/Heatmap.vue’)
const Banner = () =>
import( / webpackChunkName: “Home” / ‘…/views/Banner.vue’)
const Hotarticle = () =>
import( / webpackChunkName: “Home” / ‘…/views/Hotarticle.vue’)
const Userschart = () =>
import( / webpackChunkName: “Home” / ‘…/views/Userschart.vue’)
import( / webpackChunkName: “Home” / ‘…/views/Hotarticle.vue’)
const Persons = () =>
import( / webpackChunkName: “Home” / ‘…/views/Persons.vue’)
const Tasktemp = () =>
import( / webpackChunkName: “Home” / ‘…/views/Tasktemp.vue’)
const Tasktempadd = () =>
import( / webpackChunkName: “Home” / ‘…/views/Tasktempadd.vue’)
const Taskchart = () =>
import( / webpackChunkName: “Home” / ‘…/views/Taskchart.vue’)
const Tackcollect = () =>
import( / webpackChunkName: “Home” / ‘…/views/Tackcollect.vue’)
const Taskmanagement = () =>
import( / webpackChunkName: “Home” / ‘…/views/Taskmanagement.vue’)
const Taskadd = () =>
import( / webpackChunkName: “Home” / ‘…/views/Taskadd.vue’)
const Charlist = () =>
import( / webpackChunkName: “Home” / ‘…/views/Charlist.vue’)
const Pointsstatistics = () =>
import( / webpackChunkName: “Home” / ‘…/views/Pointsstatistics.vue’)
const Effectrecycle = () =>
import( / webpackChunkName: “Home” / ‘…/views/Effectrecycle.vue’)
const LabelManage = () =>
import( / webpackChunkName: “Home” / ‘…/views/LabelManage.vue’)
const ContentLibrary = () =>
import( / webpackChunkName: “Home” / ‘…/views/ContentLibrary.vue’)
const Recharge = () =>
import( / webpackChunkName: “Home” / ‘…/views/Recharge.vue’)
const TaskaddDraft = () =>
import( / webpackChunkName: “TaskaddDraft” / ‘…/views/TaskaddDraft.vue’)
const SkinConfig = () =>
import( / webpackChunkName: “Home” / ‘…/views/SkinConfig.vue’)
const ClueTool = () =>
import( / webpackChunkName: “Home” */ ‘…/views/ClueTool.vue’);

let _this = this;

import store from ‘@/store/index’
// 解决连续点击同一个路由报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) {
return originalPush.call(this, location, onResolve, onReject)
}
return originalPush.call(this, location).catch(err => err)
}

const routes = [{
path: ‘/’,
name: ‘index’,
component: About,
children: [],
meta: {
title: ‘tinymce’,
icon: ‘component’
}
},
{
path: ‘/index’,
name: ‘index’,
component: About,
children: [],
meta: {
title: ’ About’,
icon: ‘component’
}
},

{
path: ‘/about’,
name: ‘About’,
component: About,
children: [],
meta: {
title: ‘About’,
icon: ‘component’
}
},
{
path: ‘/login’,
name: ‘login’, // 登录
component: Login,
children: [],
meta: {
title: ‘Login’,
icon: ‘component’
}
},
{
path: ‘/register’,
name: ‘register’, // 注册
component: Register,
children: [],
meta: {
title: ‘register’,
icon: ‘component’
}
},
]

//需要动态添加的路由
const persons = {
path: ‘Persons’,
name: ‘Persons’,
children: [],
component: Persons,
meta: {
title: ‘成员管理’,
isMenu: true,
icon: ‘component’
}
}

const workorder = {
path: ‘Workorder’,
name: ‘Workorder’,
children: [],
component: Workorder,
meta: {
title: ‘工单管理’,
isMenu: true,
icon: ‘component’
}
}
const financial = {
path: ‘Financial’,
name: ‘Financial’,
children: [],
component: Financial,
meta: {
title: ‘财务管理’,
isMenu: true,
icon: ‘component’
}
}
const heatmap = {
path: ‘Heatmap’,
name: ‘Heatmap’,
children: [],
component: Heatmap,
meta: {
title: ‘用户触达热力图’,
isMenu: true,
icon: ‘component’
}
}
const banner = {
path: ‘Banner’,
name: ‘Banner’,
children: [],
component: Banner,
meta: {
title: ‘banner管理’,
isMenu: true,
icon: ‘component’
}
}
const clueTool = {
path: ‘ClueTool’,
name: ‘ClueTool’,
children: [],
component: ClueTool,
meta: {
title: ‘线索数据’,
isMenu: true,
icon: ‘component’
}
}
const account = {
path: ‘Account’,
name: ‘Account’,
children: [],
component: Account,
meta: {
title: ‘账号管理’,
isMenu: true,
icon: ‘component’
}
}
const role = {
path: ‘Role’,
name: ‘Role’,
children: [],
component: Role,
meta: {
title: ‘角色管理’,
isMenu: true,
icon: ‘component’
}
}
const reportform = {
path: ‘Reportform’,
name: ‘Reportform’,
children: [],
component: Reportform,
meta: {
title: ‘报表统计’,
isMenu: true,
icon: ‘component’
}
}
const notice = {
path: ‘Notice’,
name: ‘Notice’,
children: [],
component: Notice,
meta: {
title: ‘公告管理’,
isMenu: true,
icon: ‘component’
}
}
const hotarticle = {
path: ‘Hotarticle’,
name: ‘Hotarticle’,
children: [],
component: Hotarticle,
meta: {
title: ‘原创热文管理’,
isMenu: true,
icon: ‘component’
}
}
const tasktemp = {
path: ‘Tasktemp’,
name: ‘Tasktemp’,
children: [],
component: Tasktemp,
meta: {
title: ‘任务模板管理’,
isMenu: true,
icon: ‘component’
}
}
const userschart = {
path: ‘Userschart’,
name: ‘Userschart’,
children: [],
component: Userschart,
meta: {
title: ‘用户统计’,
isMenu: true,
icon: ‘component’
}
}
const tasktempadd = {
path: ‘Tasktempadd’,
name: ‘Tasktempadd’,
children: [],
component: Tasktempadd,
meta: {
title: ‘’,
isMenu: false,
icon: ‘component’
}
}
const taskchart = {
path: ‘Taskchart’,
name: ‘Taskchart’,
children: [],
component: Taskchart,
meta: {
title: ‘任务统计’,
isMenu: true,
icon: ‘component’
}
}
const tackcollect = {
path: ‘Tackcollect’,
name: ‘Tackcollect’,
children: [],
component: Tackcollect,
meta: {
title: ‘tinymce’,
isMenu: true,
icon: ‘component’
}
}
const taskmanagement = {
path: ‘Taskmanagement’,
name: ‘Taskmanagement’,
children: [],
component: Taskmanagement,
meta: {
title: ‘任务管理’,
isMenu: true,
icon: ‘component’
}
}
const taskadd = {
path: ‘Taskadd’,
name: ‘Taskadd’,
children: [],
component: Taskadd,
meta: {
title: ‘’,
isMenu: false,
icon: ‘component’
}
}
const charlist = {
path: ‘Charlist’,
name: ‘Charlist’,
children: [],
component: Charlist,
meta: {
title: ‘’,
isMenu: true,
icon: ‘component’
}
}
const pointsstatistics = {
path: ‘Pointsstatistics’,
name: ‘Pointsstatistics’,
children: [],
component: Pointsstatistics,
meta: {
title: ‘积分发放统计’,
isMenu: true,
icon: ‘component’
}
}
const operationlog = {
path: ‘Operationlog’,
name: ‘Operationlog’,
children: [],
component: Operationlog,
meta: {
title: ‘操作日志’,
isMenu: true,
icon: ‘component’
}
}
const effectrecycle = {
path: ‘Effectrecycle’,
name: ‘Effectrecycle’,
children: [],
component: Effectrecycle,
meta: {
title: ‘效果回收’,
isMenu: true,
icon: ‘component’
}
}
const labelManage = {
path: ‘LabelManage’,
name: ‘LabelManage’,
children: [],
component: LabelManage,
meta: {
title: ‘成员标签管理’,
isMenu: true,
icon: ‘component’
}
}
const contentLibrary = {
path: ‘ContentLibrary’,
name: ‘ContentLibrary’,
children: [],
component: ContentLibrary,
meta: {
title: ‘内容管理’,
isMenu: true,
icon: ‘component’
}
}
const recharge = {
path: ‘Recharge’,
name: ‘Recharge’,
children: [],
component: Recharge,
meta: {
title: ‘企业充值’,
isMenu: true,
icon: ‘component’
}
}
const taskaddDraft = {
path: ‘TaskaddDraft’,
name: ‘TaskaddDraft’,
children: [],
component: TaskaddDraft,
meta: {
title: ‘’,
isMenu: false,
icon: ‘component’
}
}
const skinConfig = {
path: ‘SkinConfig’,
name: ‘SkinConfig’,
children: [],
component: SkinConfig,
meta: {
title: ‘换肤管理’,
isMenu: true,
icon: ‘component’
}
}

//二级动态路由
const tasktempData = {
path: ‘Tasktemp’,
name: ‘TasktempData’,
children: [],
component:Layout,
meta: {
title: ‘任务管理’,
isMenu: true,
icon: ‘component’
}
}
const userschartData = {
path: ‘Userschart’,
name: ‘UserschartData’,
children: [],
component:Layout,
meta: {
title: ‘数据统计’,
isMenu: true,
icon: ‘component’
}
}
const accountData = {
path: ‘Account’,
name: ‘AccountData’,
children: [],
component:Layout,
meta: {
title: ‘系统管理’,
isMenu: true,
icon: ‘component’
}
}

const contentLibraryData = {
path: ‘ContentLibrary’,
name: ‘ContentLibraryData’,
children: [],
component:Layout,
meta: {
title: ‘内容管理’,
isMenu: true,
icon: ‘component’
}
}

// 动态路由根据名称匹配跳转页面
const ruleMappingData = {
‘AccountData’: accountData,
‘UserschartData’: userschartData,
‘TasktempData’: tasktempData,
‘ContentLibraryData’:contentLibraryData
}

const ruleMapping = {
‘Persons’: persons,
‘Workorder’: workorder,
‘Financial’: financial,
‘Heatmap’: heatmap,
‘Banner’: banner,
‘ClueTool’: clueTool,
‘Account’: account,
‘Role’: role,
‘Reportform’: reportform,
‘Notice’: notice,
‘Hotarticle’: hotarticle,
‘Tasktemp’: tasktemp,
‘Userschart’: userschart,
‘Tasktempadd’: tasktempadd,
‘Taskchart’: taskchart,
‘Tackcollect’: tackcollect,
‘Taskmanagement’: taskmanagement,
‘Taskadd’: taskadd,
‘Charlist’: charlist,
‘Pointsstatistics’: pointsstatistics,
‘Operationlog’: operationlog,
‘Effectrecycle’: effectrecycle,
‘LabelManage’: labelManage,
‘ContentLibrary’: contentLibrary,
‘Recharge’: recharge,
‘TaskaddDraft’: taskaddDraft,
‘SkinConfig’: skinConfig,
};

Vue.use(VueRouter)

//解决vue 重复点击相同路由，出现 UnCaught
// const vueRouterPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(to) {
// return vueRouterPush.call(this, to).catch(err => err)
// }

const router = new VueRouter({
routes
})

// mode: “hash”,

//深拷贝
function deepClone(obj) { //可传入对象 或 数组
// 判断是否为 null 或 undefined 直接返回该值即可,
if (obj === null || !obj) return obj;
// 判断 是要深拷贝 对象 还是 数组
if (Object.prototype.toString.call(obj) === “[object Object]”) { //对象字符串化的值会为 “[object Object]”
let target = {}; //生成新的一个对象
const keys = Object.keys(obj); //取出对象所有的key属性 返回数组 keys = [ ]
//遍历复制值, 可用 for 循环代替性能较好
keys.forEach(key => {
if (obj[key] && typeof obj[key] === “object”)
//如果遇到的值又是 引用类型的 [ ] {} ,得继续深拷贝
target[key] = deepClone(obj[key]); //递归
else
target[key] = obj[key];

})
return target //返回新的对象

} else if (Array.isArray(obj)) {
// 数组同理
let arr = [];
obj.forEach((item, index) => {
if (item && typeof item === “object”)
arr[index] = deepClone(item);
else
arr[index] = item;
})
return arr
}
}

// 动态导入路由
// 动态导入路由
export function initRoutes() {

const token = store.state.token;
console.log(“initRoutes”, router.options.routes);
if (!token) {
router.login
} else {
const currentRoutes = router.options.routes; // 获取要添加路由的当前路由
const navList = store.state.navList; // 获取state中缓存的根据权限获取的路由

const currentIndex = {
  path: '/home',
  component: Home,
  name: "home",
  children: []
}

currentIndex.children.push(ruleMapping["TaskaddDraft"]);
currentIndex.children.push(ruleMapping["Taskadd"]);
currentIndex.children.push(ruleMapping["Tasktempadd"]);
if(navList=="_"){
  router.push({path:"/login"  });
}else{
  if (navList.children.length > 0) {
    if (navList.name == "home") {
      const list = navList.children
      const redirect = "/home/" + list[0].path;
      currentIndex.redirect = redirect
      for (let i = 0; i < list.length; i++) {
        if (!(!list[i] && typeof (list[i]) != "undefined" && list[i] != 0)) {
          if (list[i].path != "") {
            let temp = "";
            // 获取需要动态添加的路由，对应的跳转页面配置
            if (list[i].children.length > 0) {
              temp = deepClone(ruleMappingData[list[i].name + "Data"]);
              } else {
                temp = deepClone(ruleMapping[list[i].name]);
              }
            let arr = [];
            for (let x = 0; x < list[i].children.length; x++) {
              let obj = deepClone(ruleMapping[`${list[i].children[x].name}`]);
              console.log("obj", obj);
              obj.children = [];
              arr.push(obj);
            }
            temp.children = arr;
            console.log(temp, arr);
            console.log(temp);
            currentIndex.children.push(temp); // 将匹配的路由，添加到当前路由的对应子路由位置
          }
        }
      }
    } else {

    }
    currentRoutes.push(currentIndex);
    console.log("------------------需要动态添加的路由-----------------", currentIndex, currentRoutes)
    router.addRoutes(currentRoutes); //执行动态添加路由方法，完成动态路由添加
    console.log("动态添加后的路由", router);
  }
}

}
}

// 重置路由（退出登录，切换账号）
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // the relevant part
router.options = newRouter.options;
}

export default router