今天在实现一个小功能的时候,遇到一个问题,使用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. WPF 动态更换模板

    Window x:Class="模板选择器.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml ...

  2. myeclipse2014 安装maven3.3.9和maven配置本地仓库 及错误修改

    结合网上的知识梳理以及自己安装的经验 myeclipse2014 安装maven3.3.9和maven配置本地仓库  及犯的错误修改  成功搞定maven 1,安装 Maven 之前要求先确定你的 J ...

  3. SignalR-001

    SignalR 是什么? ASP.NET Core SignalR 是一个开放源代码库,它简化了向应用添加实时 web 功能. 实时 web 功能立即使服务器端代码能够将内容推送到客户端. 一.有这么 ...

  4. HDU6300-2018ACM暑假多校联合训练1003-Triangle Partition

    题意是给3n个点,其中不可能存在任意三点共线的情况,让你在其中建n个三角形,点不能重复使用,三角形不能相互覆盖 做法是给每个点排序,按照先y轴排,再x轴排的顺序,三个三个一组从下往上输出,有人说是凸包 ...

  5. KVO - 观察自定义属性值

    1 . 声明属性&注册监听 { BOOL isOk; } [self addObserver:self forKeyPath:@"isOk" options:0 conte ...

  6. [AHOI2009]中国象棋 BZOJ1801 dp

    题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...

  7. chmod变更文件或目录的权限

    chmod命令用来变更文件或目录的权限.在UNIX系统家族里,文件或目录权限的控制分别以读取.写入.执行3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录的权限, ...

  8. .Net Core 使用swagger UI

    swagger UI 第一步:首先添加包Swashbuckle.AspNetCore (可通过微软添加包命令Install-Package 包名进行添加,也可以通过管理NuGet程序包进行添加) 第二 ...

  9. Android 日历视图(Calendarview)

    1.介绍 2.常用属性 3.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  10. samtools软件作用

    samtools的说明文档:http://samtools.sourceforge.net/samtools.shtml samtools是一个用于操作sam和bam文件的工具合集,包含有许多命令.以 ...