1.针对的是动态配置的页面里面传不同的参数的功能
1.1针对的是动态生成的页面和不同的参数,固定动态页面全部放在Custom之下(非之下的还在思考如何解决匹配的问题)
1.11动态配置页面路径和参数例如/Custom/Index1/:id0/:id1/:id2
1.12在获取后台的地址的渲染,addRoute之前,使用meta里面的params进行传参,isDynamic设置为true证明此为动态路由;多个参数的时候则根据id0,id1,id3这样默认传参的方式;
// 静态匹配不上的时候,匹配固定的动态
export function dynamicComAndUrl(item: any) {
let newPage: string;
item.url = item.url[0] == '/' ? item.url : '/' + item.url;
//目前是使用Custom文件夹下的作为动态的===母集
const newArr = ('moduls' + item.url).match(/(moduls\/Custom\/([a-zA-Z]|[0-9])*)/);
if (newArr) {
newPage = newArr[0];
item.component = dynamicViewsModules[`../views/${newPage}.vue`]; //避免打包到服务武器上报错
item.path = item.url;
item.meta.isDynamicPath = item.url;
item.meta.isDynamic = true;
let paramsArr =
newPage.substring(6, newPage.length) &&
item.url.split(newPage.substring(6, newPage.length) + '/') &&
item.url.split(newPage.substring(6, newPage.length) + '/')[1];
paramsArr = paramsArr.split('/');
// 多个参数 默认为 id0 id1 id2这样传值
// 单个参数 id传值
if (paramsArr.length != 0) {
paramsArr.forEach((element: string, i: number) => {
if (!item.meta.params) {
item.meta.params = {};
}
item.meta.params[`id${i}`] = element;
});
}
}
return item;
}
1.13在beforeEach路由前置守卫的时候判断是否为动态路由,如果是的话则将meta.params赋值给to.params然后next()放行
const newArr = to.path.match(/(Custom\/([a-zA-Z]|[0-9])*)/);
if (to.meta.isDynamic) {
(to.params = to.meta.params as any), next();
}
next();
}
缺点:1.如果手动修改uerl的参数页面会跳到404,需要兼容一下这种的操作方式;2.默认都放在Custom文件夹下,因为有固定的文件夹下才可以根据(‘moduls’ + item.url).match(/(moduls/Custom/([a-zA-Z]|[0-9])*)/);这样取匹配出对应的需要匹配的页面和参数;感觉放在其他未知的文件夹下无法判断
努力啊上进啊~适者生存 ~坚持就是胜利 ~!!赚钱