在vue中利用全局路由钩子给url统一添加公共参数的例子

有的时候我们可能有这样的需求,⽐如现在url为m.taoyuewenhua.com/#/ 我们需要在⽤户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx;这个参数称为\"公共参数\";

那么,我们该如何做呢？因为vue中有很多组件.在每个组件都写的话,太⿇烦.所以这个时候,全局路由钩⼦登场了.分别是router.beforeEach 全局导航前置守卫 路由跳转前执⾏

router.beforeResolve 全局导航解析守卫 vue2.5新增 导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调⽤

router.afterEach 全局导航后置守卫 路由跳转后执⾏

我们此次⽤到的是前置守卫.开始我⽤的是后置守卫.因为出现bug,也可能是本⼈技术不精.后⼜改为前置守卫.代码如下：

router.beforeEach((to, from, next) => { if (to.query.abc) { next(); return; };

if (from.query.abc) {

let toQuery = JSON.parse(JSON.stringify(to.query)); toQuery.abc = from.query.abc; next({

path: to.path, query: toQuery })

} else { next() } });

在这⾥解释⼀下: 前置守卫⼀定记得执⾏next⽅法.如果不执⾏,路由不会跳转.路由在跳转的时候,如果我们输出from和to.他们分别代表上⼀个路由和现在的路由.假如我们要从a调到b;也就是跳转的时候,我们马上获取b路由地址.并且判断此时b路由有没有abc这个参数.如果有就直接跳转过去,next⽅法执⾏.并且return;如果没有,然后如果a这个url有abc这个参数了,那么我们就把这个参数放到b的url上;并且next⽅法执⾏.携带上这个参数就⾏了. 最后,如果a没有这个参数 ,直接next⽅法执⾏.也就是说路由直接跳转过去,不做任何拦截。

还有⼀点需要提醒初学者.初学者刚⽤路由钩⼦容易遇到死循环.建议好好看⼀下路由钩⼦的执⾏机制.就不会遇到死循环了.有时间了说⼀下这个问题.

以上这篇在vue中利⽤全局路由钩⼦给url统⼀添加公共参数的例⼦就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。