vue路由URL拼接全局参数
业务需求:
vue单页面项目,需要在URL地址栏拼接固定的参数,在所有页面使用。默认采用vue路由的history模式;hash模式也可以同样适用。
主要是在vue-router导航守卫的全局前置守卫中实现。即vue-router生命周期钩子函数 router.beforeEach 中进行路由拦截处理。
主要代码:
router.beforeEach((to, from, next) => {
if (Object.keys(to.query).length) {
next();
return;
}
// 对URL路径参数进行处理
if (Object.keys(from.query).length) {
let toQuery = JSON.parse(JSON.stringify(from.query));
next({ path: to.path, query: toQuery });
} else {
next();
}
});
注:最初只是设置一个固定的参数,但是后期参数地址栏会动态拼接出来一些参数,这些参数可能需要在部分路径需要使用,所以就对路由拦截进行了相应的处理。即现在代码块中展示的。此方法解决了我所需要解决的问题。若要结合自身项目使用,请根据自己的实际需求进行相应的调整。