使用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 multibox 全选
Mar 22 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
Ajax基础知识详解
Feb 17 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
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
提升PHP速度全攻略
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python reduce 函数使用详解
2017/12/05 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
秘书英文求职信
2014/04/16 职场文书
八一建军节慰问信
2015/02/14 职场文书
贫困证明怎么写
2015/06/16 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL