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==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...
 
随机推荐
- Spring集成MyBatis的使用-使用SqlSessionTemplate
			
Spring集成MyBatis的使用 Spring集成MyBatis,早期是使用SqlSessionTemplate,当时并没有用Mapper映射器,既然是早期,当然跟使用Mapper映射器是存在一些 ...
 - Steering Behaviors
			
[Steering Behaviors] 1.Seek 下述的算法是一个基本Seek行为,但不带任何Steering输出的力.在该公式作用下,游戏个体的移动方式是直线型的,如果target的位置变了的 ...
 - 申请ssl证书报提示caa提示
			
申请ssl证书报下面提示caa提示,这和dns有关,换一组dns重新申请 send challenge err[acme error 'urn:acme:error:connection': DNS ...
 - feign的hystrix不起作用.
			
在springCloud中使用feign内嵌的断路器hystrix时.feign中的hystrix不起作用.这可能是由于springCloud的版本原因造成的.需要在application.prope ...
 - ucore-lab1-练习4report
			
练习四:分析bootloader加载ELF格式的OS的过程 1.bootloader如何读取硬盘扇区? (1)在练习3中实现了bootloader让CPU进入保护模式,下一步的工作就是从硬盘上加载并 ...
 - POJ-3126.PrimePath(欧拉筛素数打表 + BFS)
			
给出一篇有关素数线性筛和区间筛的博客,有兴趣的读者可以自取. 本题大意: 给定两个四位的素数,没有前导零,每次变换其中的一位,最终使得两个素数相等,输出最小变换次数.要求变换过程中的数也都是素数. 本 ...
 - TOJ 4829: 计算器的改良
			
Python写法! 传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=4829 描述 N ...
 - ACM-ICPC 2018 沈阳赛区网络预赛 F. Fantastic Graph (贪心或有源汇上下界网络流)
			
"Oh, There is a bipartite graph.""Make it Fantastic."X wants to check whether a ...
 - log4j 产生的日志位置设置和catalina.home、catalina.base
			
方法一. 解决的办法自然是用相对路径代替绝对路径,其实log4j的FileAppender本身就有这样的机制,如:log4j.appender.logfile.File=${WORKDIR}/logs ...
 - CMakeLists.txt的写法
			
[1]ADD_LIBRARY: Add a library to the project using the specified source files.要求CMake根据指定的源文件生成库文件 . ...