vue-router 拼接全局参数

预计阅读时间: 2 分钟

业务需求：

vue 单页面项目，需要在 URL 地址栏拼接固定的参数，在所有页面使用。默认采用 vue 路由的 history 模式、hash 模式也可以同样适用。主要是在 vue-router 导航守卫的全局前置守卫中实现。即 vue-router 生命周期钩子函数 router.beforeEach 中进行路由拦截处理。

主要代码：

代码示例

1router.beforeEach((to, from, next) => {
2	if (Object.keys(to.query).length) {
3		next();
4		return;
5	}
6	// 对URL路径参数进行处理
7	if (Object.keys(from.query).length) {
8		let toQuery = JSON.parse(JSON.stringify(from.query));
9		next({ path: to.path, query: toQuery });
10	} else {
11		next();
12	}
13});

注意事项

最初只是设置一个固定的参数，但是后期参数地址栏会动态拼接出来一些参数，这些参数可能需要在部分路径需要使用，所以就对路由拦截进行了相应的处理。即现在代码块中展示的。
此方法解决了我所需要解决的问题。若要结合自身项目使用，请根据自己的实际需求进行相应的调整。

#vue-router 拼接全局参数

#业务需求：

#主要代码：

vue-router 拼接全局参数

业务需求：

主要代码：