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

5星 · 超过95%的资源 101 浏览量更新于2023-05-03 评论收藏 47KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

在在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统一添加公共参数的例子就是小编分享给大家的全部内容了，希望能给大家一个参

考，也希望大家多多支持软件开发网。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论10

yxldr

2023-06-17

总的来说，这是一篇非常实用和值得参考的vue文章。

weixin_38731199

粉丝: 6
资源: 928

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈