使用vue-router切换页面时,获取上一页url以及当前页面url
今天在实现一个小功能的时候,遇到一个问题,使用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的更多相关文章
- js获取上一页、当前页及域名url方法,JS反回上一页的方法
<html> <head> <title>js获取上一页url,js获取前一页地址,javascripts获取上一页url,javascript获取前一页地址< ...
- js获取上一页、当前页及域名url
一个业务中可能会用到,跳转到另个页面后, 又后退回之前的页面,之前的页面上有个判断提示一定会出 网上搬了下代码 console.log("js获取当前域名"+window.loca ...
- vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行
https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...
- 用javascript实现禁止页面后退返回上一页的代码
用javascript实现禁止页面后退返回上一页的代码: 有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法: 在需要跳转的页 ...
- 获取上一个页面的data
let pages = getCurrentPages();// 获取页面栈 let current = pages[pages.length - 1]; // 当前页面 let url = curr ...
- 打开jsp页面时,显示空白页。
打开jsp页面时,显示空白页. #foreach($e in $listPlanItem) #set($listPlanDetail=$!e.get(2)) < ...
随机推荐
- 【转】远程桌面关闭后TeamViewer不能连接
源地址:http://www.cnblogs.com/qk2014/p/9274852.html 1.本地安装TeamViewer,完成后如下: 2.远程服务器也安装TeamViewer 在本地Tea ...
- 【转】WinForm时间选择控件(DateTimePicker)如何选择(显示)时分秒
源地址:https://www.cnblogs.com/EvanFan/p/7826160.html 注意:年月日时分秒的大小写格式,如果错了数据就错了,如果能显示当前时间说明设置正确
- Java设计模式之单例设计模式 入门实例
一.基础概念 (1).单例设计模式:保证一个类在内存中的对象唯一性. (2).应用场景:数据都存储在配置文件的对象中,多个程序对同一个配置文件的对象进行操作.一个程序要基于另一个程序操作后的结果进行操 ...
- 安装opencv-python
1.安装包下载:在下面的网址下载对应版本及平台的 .whl 包,再手动安装. https://www.lfd.uci.edu/~gohlke/pythonlibs/ 2.将其拷贝到 Python 目录 ...
- ubuntu18.04 安装mongodb 数据库
工具: 系统:ubuntu18.04 64位 数据库:mongodb GUI:Robo 3T 描述:在win 下面使用Robo 3T 连接Mongodb 数据库 一. 安装mo ...
- 请求一个域名ip的缓存用处
前言 摘录自操作系统,这一段的内容很有启发,稍微加上自己的理解,写一篇博客记录一下. 缓存 缓存成功解决了速度不匹配设备之间的数据传输,并且在一般情况下,是整个系统的瓶颈:缓存的出现,有效减少了低速I ...
- JavaWeb学习笔记(一)—— Http协议
一.什么是HTTP协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览 ...
- 腾讯云(Linux)安装Redis。
参考:https://blog.csdn.net/a575553272/article/details/79743802 指令:ps -ef | grep redis 查看启动后的进程.
- if __name__ == '__main__' 详解
1.__name__是啥 __name__ 是Python的模块名字. 手册解释:The name of the module. 2.__name__的值 首先,一个变量一次只有一个值. 其次,__n ...
- PostgreSQL精简命令:
dos命令行连接PostgreSQL: . 接入PostgreSQL数据库: psql -h IP地址 -p 端口 -U 用户名 -d 数据库名 . 输入数据库密码 C:\Users\admin\De ...