1vue -router 数据是存在缓存中,存在刷新丢失(类似vuex),router 添加路由在 路由守卫里统一处理;
1.登录->添加路由->刷新丢失->路由登录前->添加—>统一 路由守卫是添加(大一统)
import Main from "@/components/main";
// 配置 按钮
import config from "@/config";
const { isbnt } = config;
// 代理到vux
import store from "@/store";
export let initroute = function(arr) {
let routes = [],
butList = [];
routes = arr.map((item, index) => {
// 处理路由 button
if (item.component.indexOf("/") == -1 && item.webPath.indexOf("/") == -1) {
butList.push(item);
}
return {
path: item.webPath,
name: item.name,
meta: {
icon: item.icon,
title: item.description,
// 隐藏菜单
hideInMenu: item.routerType == "otherRouter"
},
component: Main,
children: item.children.map((oitem, index) => {
// 路由处理
let o_component;
if (oitem.component.indexOf("_c") != -1) {
oitem.component = oitem.component.replace("_c/cwl", "");
o_component = import(`_c/cwl${oitem.component}`);
} else if (oitem.component.indexOf("cwl") != -1) {
oitem.component = oitem.component.replace("@/view/cwl", "");
o_component = import(`@/view/cwl${oitem.component}`);
console.log(oitem.children, "=========oitem.children");
} else if (oitem.component.indexOf("nutrition") != -1) {
oitem.component = oitem.component.replace("@/view/nutrition", "");
o_component = import(`@/view/nutrition${oitem.component}`);
} else if (oitem.component.indexOf("home") != -1) {
oitem.component = oitem.component.replace("@/view/home", "");
o_component = import(`@/view/home${oitem.component}`);
} else if (oitem.component.indexOf("detectassess") != -1) {
oitem.component = oitem.component.replace("@/view/detectassess", "");
o_component = import(`@/view/detectassess${oitem.component}`);
} else if (oitem.component.indexOf("monitoring-center") != -1) {
oitem.component = oitem.component.replace(
"@/view/monitoring-center",
""
);
o_component = import(`@/view/monitoring-center${oitem.component}`);
}
if (
oitem.component.indexOf("/") == -1 &&
oitem.webPath.indexOf("/") == -1
) {
butList.push(oitem);
}
// 按钮 设置
oitem.children.forEach((zitem, zindex) => {
if (
zitem.component.indexOf("/") == -1 &&
zitem.webPath.indexOf("/") == -1
) {
butList.push(zitem);
}
});
let children = {
path: oitem.webPath,
name: oitem.name,
meta: {
icon: item.icon,
title: oitem.description
},
component: () => o_component
};
// 隐藏菜单
if (oitem.routerType == "otherRouter") {
children.meta.hideInMenu = true;
}
return children;
})
};
});
console.log(routes, "=====================routes123", butList);
if (Array.isArray(butList) && butList.length > 0) {
let isbntarr = [];
butList.forEach(item => {
if (item.name in isbnt) {
isbntarr.push(isbnt[item.name]);
}
});
console.log(isbntarr, "===123");
window.sessionStorage.setItem("isbntList", JSON.stringify(isbntarr));
}
return routes;
};
let routingArray = initroute(JSON.parse(response.respBody));
routes.push(...routingArray);
router.addRoutes(routes);
路由刷新会丢失 类似于 vuex 的数据结构 因此需要重新赋值 添加
参考vuex :https://editor.csdn.net/md/?articleId=118481831
let routelist = sessionStorage.getItem("routelist");
let routingArray = initroute(JSON.parse(routelist));
routes.push(...routingArray);
router.addRoutes(routes);
动态文件
// ----------------------------------------------------------------------------------
res = "huizhou/huizhou";
let huizhou = require(`@/assets/map/${res}.json`);
echarts.registerMap("huizhou", huizhou as any);
// json 可以进行ajax请求进行处理文件
参考:https://www.jianshu.com/p/386916c73dad
res = "huizhou/huizhou";
let huizhou = import(`@/assets/map/${res}.json`);
console.log(huizhou, "======================import");
huizhou.then((res) => {
console.log(res.default, "===res");
});
让我们来分析一下:第一个不同寻常的地方在于-我们引入a.js两次,然而只得到了一次反馈。你可能还记得,这是ES模块的一个特性,当他们为单例时,他们只被调用一次。
其次,动态导入在静态导入之前执行。这是因为我在我的HTML中引入了传统的脚本中调用了动态import()(你也可以在传统的脚本中使用动态导入,不仅仅是在模块中!):
<script type="module" src="static.js"></script>
<script src="dynamic.js"></script>
我们知道type="module"脚本会默认延迟,等到DOM解析后才会按顺序被引入进来。这就是为什么dynamic脚本先被执行。熟练运用import()会让你找到一把打开所有原生ES模块的一把钥匙,你可以随时随地的加载并使用他们。
第三个不同在于:静态导入保证你的脚本按顺序执行, 但是动态导入的脚本不按它们在代码中显示的顺序执行。你必须知道,每一个动态导入都是独立存在的,他们之间互无关联,也不会等待其他执行完成执行。
动态import()提供基于Promise的API
import()遵循ES模块规则:单例、匹配符、CORS 等
import()可以在传统的脚本中使用也可以在模块中使用
在代码中使用的import()的顺序与它们被解析的顺序没有任何关联
<!--module.js-->
<script type="module" src="module.js"></script>
<!--classic.js-->
<script src="classic.js"></script>
// module/classic.js
import('./imported.js').then(()=>{
console.log('imported.js is just imported from the module/classic.js');
});
这意味着,import()作为模块执行脚本实际上与在then()函数中我们可以使用模块导出(如module.default等)的语法一致。
const locale = 'en';
import(`./utils_${locale}.js`).then(
(utils)=>{
console.log('utils', utils);
utils.default();
}
);
关于调试 - 最突出的优点,你可以在浏览器DevTools控制台中访问ES模块,因为import()可以任何地方使用。
你可以轻松的加载、测试或者调试模块。让我们做一个简单的例子,加载一个官方ECMAScript版本的lodash(lodash-es)并检查其版本和一些其他功能:
import("https://cdn.rawgit.com/lodash/lodash/4.17.4-es/lodash.default.js")
.then(({default:_})=>{// load and use lodash
console.log(`lodash version ${_.VERSION} is loaded`)
console.log('_.uniq([2, 1, 2]) :', _.uniq([2, 1, 2]));
});
Promise.all([
import('./a.js'),
import('./b.js'),
import('./c.js'),
])
.then(([a, {default: b}, {c}]) => {
console.log('a.js is loaded dynamically');
b('isDynamic');
c('isDynamic');
});
const CDNs = [
{
name: 'jQuery.com',
url: 'https://code.jquery.com/jquery-3.1.1.min.js'
},
{
name: 'googleapis.com',
url: 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'
}
];
console.log(`------`);
console.log(`jQuery is: ${window.jQuery}`);
Promise.race([
import(CDNs[0].url).then(()=>console.log(CDNs[0].name, 'loaded')),
import(CDNs[1].url).then(()=>console.log(CDNs[1].name, 'loaded'))
]).then(()=> {
console.log(`jQuery version: ${window.jQuery.fn.jquery}`);
});