使用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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
window.location.hash 使用说明
Nov 08 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
如何将JavaScript将数组转为树形结构
Jun 02 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 5.3.0 安装分析心得
2009/08/07 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python单链表实现代码实例
2013/11/21 Python
详细解读Python中的__init__()方法
2015/05/02 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
个人委托书范本
2014/04/02 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
商务宴会祝酒词
2015/08/11 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
使用pytorch实现线性回归
2021/04/11 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle