使用vue-router切换页面时,获取上一页url以及当前页面url的方法


Posted in Javascript onMay 06, 2019

今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下:

项目使用的是vue-cli,直接贴代码        

export default {
  mixins: [],
  vuex: {
   actions: {fetchCertificates},
  },
  data() {
   return {}
  },
  route: {
   data() {
    this.$root.showLoading();
    return this.fetchCertificates().then((res) => {
     this.$root.dismissLoading();
     if (res.error) return this.$root.toastError(res.error);
     if(res.data.certificates.length >0){
      return res.data;
     }else{
      console.log(this.$route ,"----当前页面的url信息----");
     }
    });
   },
   canActivate (transition) {
    console.log(transition,"======上一个页面的url信息=======");
    transition.next();
   }
  },
 }

使用vue-router切换页面时,获取上一页url以及当前页面url的方法

使用vue-router切换页面时,获取上一页url以及当前页面url的方法

以上所述是小编给大家介绍的使用vue-router切换页面时,获取上一页url以及当前页面url的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
js子页面获取父页面数据示例
May 15 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
微信小程序实现漂亮的弹窗效果
May 26 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue路由跳转传参数的方法
May 06 #Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
用Vue编写抽象组件的方法
May 06 #Javascript
JS解惑之Object中的key是有序的么
May 06 #Javascript
微信小程序和百度的语音识别接口详解
May 06 #Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 #Javascript
You might like
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
培养自己的php编码规范
2015/09/28 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python数据结构之链表详解
2017/09/12 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
班主任工作年限证明
2014/01/12 职场文书
中学教师管理制度
2014/01/14 职场文书
统计岗位职责
2014/02/21 职场文书
生物工程专业求职信
2014/09/03 职场文书
检讨书范文
2015/01/27 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
同学会感言
2015/07/30 职场文书
婚礼答谢词范文
2015/09/29 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫