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==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...
随机推荐
- Collection集合总结,List和set集合的用法,HashSet和LinkedHashSetde用法
首先:Collection是List集合和Set集合的父类,同时,它们三个都为接口,不能直接实例化,所以需要,List和set的子类来实例化. List的子类: ArrayList类和LinkedLi ...
- 解题8(FindLongestNumberStr)
题目描述 样例输出 输出123058789,函数返回值9 输出54761,函数返回值5 接口说明 函数原型: unsignedint Continumax(char** pOutputstr, ch ...
- 【C++】构造函数语意
构造函数的构造操作 编译器何时会为一个类合成默认构造函数? 答:当编译器需要的时候. 有以下四种情况: 带有默认构造函数的类对象 以下代码为例: class Foo {public: Foo();} ...
- springboot logback
/resources/logback-spring.xml <configuration> <appender name="stdout" class=" ...
- codeblocks17.12 不能启动调试器
调试器需要手动指定. settings->debugger->default->executable path.这里默认空的,需要指定.路径在安装目录下的CodeBlocks\Min ...
- mysql windows安装资源
压缩包资源 https://mirrors.tuna.tsinghua.edu.cn/mysql/downloads/MySQL-5.7/ 配置流程 https://blog.csdn.net/hel ...
- Android四大组件总结
1:Actiivty 用户可以看见并可以操作的界面 Activity开启方式:startActivityForResult :startActivity Activity生命周期: onCreate ...
- WebForm从客户端中检测到有潜在危险的Request.Form 值的处理办法
从客户端中检测到有潜在危险的 Request.Form 值由于在.net中,Request时出现有HTML或Javascript等字符串时,系统会认为是危险性值.立马报错上面的错误. 如:在网页的Te ...
- HDU-1074.DoingHomework(撞鸭dp二进制压缩版)
之前做过一道二进制压缩的题目,感觉也不是很难吧,但是由于见少识窄,这道题一看就知道是撞鸭dp,却总是无从下手....最后看了一眼博客,才顿悟,本次做这道题的作用知识让自己更多的认识二进制压缩,并无其它 ...
- c++实现中的一些注意 事项
1,尽可能延后对象中的变量定义式的出现,这样可以增加程序的清晰度,尽量少的调用构造,如果有定义变量最好在末尾定义并给予初值,这样就避免了默认构造函数的调用. 2 尽量少做转型操作. const_cas ...