vue 获取跳转上一页组件信息
项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传递回调来访问当前组件的实例。
操作代码为:
beforeRouteEnter (to, from, next) {
console.log(to)
console.log(from)
if (from.name === null) {
//判断是否登录
this.isYJLogin()
}
},
methods: {
isYJLogin(){
localStorage.setItem('account', this.code)
}
}
如下图所示:

根据打印,也可以用这个name来判断,但是却报个错误:

查看代码,写法没有错误啊,最终查看官方文档,发现官方文档中也有说明:
beforeRouteEnter 守卫不能访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
可以这样更改代码如下:
data(){
return {
newPath:''
}
},
beforeRouteEnter(to, from, next){
next(vm => {
// 通过 `vm` 访问组件实例,将值传入newPath
vm.newPath = from.name
if (from.name === null) {
//判断是否登录
vm.isYJLogin()
}
})
},
methods: {
isYJLogin(){
localStorage.setItem('account', this.code)
}
}
注:beforeRouteEnter这个方法在mounted:function()之后运行。
vue 获取跳转上一页组件信息的更多相关文章
- 哪些场景下无法获得上一页referrer信息
哪些场景下无法获得上一页referrer信息 直接在浏览器地址栏中输入地址: 使用 location.reload() 刷新(location.href 或者 location.replace() ...
- vue 详情跳转至列表页 实现列表页缓存
甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该 ...
- 简述Vue项目中返回上一页
1.背景 由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-)或back()是行不通的,所以,我们使用到了Vue中的编程式导航. 2.基本使用 定义返回按钮: < ...
- 《vue.js实战》练习---标签页组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue路由跳转到登录页
// 第一种 { path:'/', component: require('../components/Login.vue') }, // 第二种 { path: '/', redirect: '/ ...
- 翻页组件page-flip调用问题
翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...
- vue翻页器,包括上一页,下一页,跳转
翻页组件 -- 子组件<template> <div class="pager-wrapper" ref="pager"> <di ...
- vue使用路由跳转到上一页
this.$router.go(-1) <template> <div> <button class="btn btn-success" @click ...
- vue 实现返回上一页不请求数据keep-alive
常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...
随机推荐
- Bootstrap 导航元素(标签页)
[Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...
- jmeter 在linux服务器的安装和运行;
linux环境下使用jmeter进行压力测试 标签(空格分隔): linux环境,jmeter linux环境下使用就meter进行压力测试: linux环境部署: 在Linux服务器先安装jdk: ...
- openstack(pike 版)集群部署(一)----基础环境部署
一.环境 1.系统: a.CentOS Linux release 7.4.1708 (Core) b.更新yum源和安装常用软件 # yum -y install epel-release ba ...
- numpy.random.uniform()
numpy.random.uniform均匀分布 2018年06月19日 23:28:03 徐小妹 阅读数:4238 numpy.random.uniform介绍: 1. 函数原型: numpy ...
- 枚举+最短路 poj1062
这里有个非常坑的地方,还有比酋长地位还更高的人,我也是看了论坛才知道... 在这里我把编号1看成终点,优惠价格看成相应的替代品编号到可替代品编号的权值,比如说有了2再加8000就到了1,那么2到1的弧 ...
- HDU-2054.A==B?(字符串简单处理)
这道题......被我各种姿势搞死的... 本题大意:给出两个数A和B,判断A和B是否相等,对应输出YES or NO. 本题思路:本题我有两种思路,第一种是直接去除前导零和后导零然后稍加处理比较字符 ...
- 153. Find Minimum in Rotated Sorted Array (Array; Divide-and-Conquer)
Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...
- stm32架构初认识
刚接触stm32f373c8t6的芯片,这到底是怎末开发的,应该说它是SOC,内部有一个核心芯片,然后在芯片的外部添加了一些有特殊功能的外设,使开发者能够完成想要的功能,以stm32f373c 8t6 ...
- linux命令学习之:cp
cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一. 如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若同时指定多个文 ...
- 用户Cookie和会话Session、SessionId的关系
一.客户端用cookie保存了sessionID 客户端用cookie保存了sessionID,当我们请求服务器的时候,会把这个sessionID一起发给服务器,服务器会到内存中搜索对应的sessio ...