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


Posted in Javascript onNovember 01, 2019

有的时候我们可能有这样的需求,比如现在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统一添加公共参数的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
javascript定时器完整实例
Feb 10 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
VSCode配置react开发环境的步骤
Dec 27 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
使用vue-cli导入Element UI组件的方法
May 16 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
js实现旋转的星空效果
Nov 01 #Javascript
浅谈小程序globalData的那些事儿
Nov 01 #Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 #Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 #Javascript
js实现漂亮的星空背景
Nov 01 #Javascript
Vue实现push数组并删除的例子
Nov 01 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
PHP中的正规表达式(一)
2006/10/09 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php数组分页实现方法
2016/04/30 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python pygame实现五子棋小游戏
2020/10/26 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
廉政教育心得体会
2014/01/01 职场文书
主题婚礼策划方案
2014/02/10 职场文书
写给老婆的检讨书
2014/02/21 职场文书
青年文明号服务承诺
2014/03/31 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
生活小常识广播稿
2015/08/19 职场文书
导游词之井冈山
2019/11/20 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书