Vue-router动态路由参数功能

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])*)/);这样取匹配出对应的需要匹配的页面和参数；感觉放在其他未知的文件夹下无法判断

努力啊上进啊~适者生存 ~坚持就是胜利 ~！！赚钱