使用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)) < ...
随机推荐
- C# Winform 加载窗体/对象时的等待页面设计
在设计应用程序过程中,有时候加载对象需时较长,我们可以显示一个Loading等待页面,对用户来说就比较友好了. 这个还是涉及到多线程,下面是步骤. 一.创建好Loading窗体: 一个Panel用于显 ...
- opencv学习笔记2
import cv2 as cvimport numpy as np"""#图像加法运算 即像素加法 (结果图=图1+图二) (两个图像必须是等大等类型的)image = ...
- 搭建vue环境网站
https://cli.vuejs.org/zh/guide/installation.html 安装成功vue脚手架 安装成功3.4版本 vue + iview项目构建 https://blog.c ...
- liunx php-fpm
查看php-fpm 相关信息 查看php-fpm是否开启 :ps -ef|grep php 查看php-fpm的位置:whereis php-fpm 查看php-fpm进程数:ps aux | gre ...
- php 实现无限极分类
原始数据 $array = array( array('id' => 1, 'pid' => 0, 'n' => '河北省'), array('id' => 2, 'pid' ...
- Linux 安装 python3
1. 安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline- ...
- indexOf获取字符位置
先定义一个字符串: var aString = "you are beautiful,so beautiful,and i love you ver much"; 拿到第一个逗号的 ...
- c# 动态生成继承类并实现序列化特性
项目来源 App传过来的字段是动态的,希望能保证扩展性,返回时,把所需要的字段与数据融合后再返回过去 数据是第3方来源的,但是序列化后的结果又希望能并列返回 如:App传过来 一个设备Id,客户Id等 ...
- win10更新后电脑没声音问题
2018-07-18 问题描述: win10系统更新之后,发现电脑突然没声音了 解决方案: 找到了一个软件,测试超级好用,下载链接 链接:https://pan.baidu.com/s/1iKTHp7 ...
- [V1-Team] WEDO创意论坛技术规格说明书
WEDO 创意论坛技术规格说明书 0x0 文档版本 版本号 说明 v1.0 初步确定技术路线 附Github仓库:WEDO 0x1 技术说明 1. 前端框架 在主流的前端框架中,我们调研了Vue. ...