今天在实现一个小功能的时候,遇到一个问题,使用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的更多相关文章

  1. js获取上一页、当前页及域名url方法,JS反回上一页的方法

    <html> <head> <title>js获取上一页url,js获取前一页地址,javascripts获取上一页url,javascript获取前一页地址< ...

  2. js获取上一页、当前页及域名url

    一个业务中可能会用到,跳转到另个页面后, 又后退回之前的页面,之前的页面上有个判断提示一定会出 网上搬了下代码 console.log("js获取当前域名"+window.loca ...

  3. vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

    vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...

  4. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  5. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  6. ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行

    https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...

  7. 用javascript实现禁止页面后退返回上一页的代码

    用javascript实现禁止页面后退返回上一页的代码:  有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法:  在需要跳转的页 ...

  8. 获取上一个页面的data

    let pages = getCurrentPages();// 获取页面栈 let current = pages[pages.length - 1]; // 当前页面 let url = curr ...

  9. 打开jsp页面时,显示空白页。

    打开jsp页面时,显示空白页.   #foreach($e in $listPlanItem)          #set($listPlanDetail=$!e.get(2))        < ...

随机推荐

  1. Kubernetes 集群部署(2) -- Etcd 集群

    Kubenetes 集群部署规划: 192.168.137.81  Master 192.168.137.82  Node 192.168.137.83  Node 以下在 Master 节点操作. ...

  2. kali linux之搜索引擎Shodan

    搜索引擎: 公司新闻动态,重要雇员信息 机密文档/网络拓扑 用户名密码 目标系统软硬件技术架构 Shodan:搜索联网的设备(iot)https://www.shodan.io/ banner:htt ...

  3. Jmeter_录制HTTPS

    [环境] Jmeter版本:Jmeter3.2: JDK版本:JDK1.8 [配置] [1]添加“线程组.Http信息头管理器.httpCookie管理器.HTTP代理服务器”: [2]设置浏览器的“ ...

  4. Python3 + django2.0 + apache2 + ubuntu14部署网站上线

    自己尝试在本地搭建了 Django 项目后,想部署到自己云服务器上,经常多次尝试和多次踩坑(捂脸),总结如下: 环境:ubuntu14, django2.0, apache2. 1.首先安装需要的库包 ...

  5. 深度学习之 TensorFlow(一):基础库包的安装

    1.TensorFlow 简介:TensorFlow 是谷歌公司开发的深度学习框架,也是目前深度学习的主流框架之一. 2.TensorFlow 环境的准备: 本人使用 macOS,Python 版本直 ...

  6. gluster peer probe: failed: Probe returned with unknown errno 107解决方法

    当在glusterfs中将服务器加到存储池中,及运行”gluster peer probe server”命令, 遇到peer probe: failed: Probe returned with u ...

  7. centos6.5 git clone http 报错

    自己搭建服务器环境为centos6.5,需要使用git clone 命令的时候报错 首先查看centos上安装的git版本,我的版本为1.7.10 报错后,查阅相关资料需将centos升级,操作如下 ...

  8. JS编程模式之初始化分支与惰性初始

    不同的浏览器对于相同或相似的方法可能有不同的实现.这时,您需要依据当前的浏览器的支持方法来选择对应的执行分支.这类分支有可能与很多,因此可能会减缓脚本的执行速度.但非要等到运行时才能分支吗?我们完全可 ...

  9. (转)2-SAT小结

    2-sat小结 原文作者:老K 原文传送门 2-sat是什么 一类问题是这样的: (两个符号的意思 \(\lor \ or,\land \ and\)) 有n个布尔变量,现在对它们做出限制,比如\(a ...

  10. SDUT OJ 数据结构实验之排序八:快速排序

    数据结构实验之排序八:快速排序 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 给定N ...