在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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
jquery remove方法应用详解
Nov 22 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
跟我学习javascript的this关键字
May 28 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
学前端,css与javascript重难点浅析
Jun 11 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python实现的批量下载RFC文档
2015/03/10 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
小学运动会口号
2014/06/07 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
长江三峡导游词
2015/01/31 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB