在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实现计算两个日期的间隔天数
Aug 14 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
js实现选项卡效果
2020/03/07 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python 对象和json互相转换方法
2018/03/22 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
详解Python中的测试工具
2019/06/09 Python
解决python flask中config配置管理的问题
2019/07/26 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python中无限循环需要什么条件
2020/05/27 Python
python 字符串格式化的示例
2020/09/21 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
法律进机关实施方案
2014/03/12 职场文书
应急管理培训方案
2014/06/12 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书