项目中有一需求,需要根据不同的页面路径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 获取跳转上一页组件信息的更多相关文章

  1. 哪些场景下无法获得上一页referrer信息

    哪些场景下无法获得上一页referrer信息 直接在浏览器地址栏中输入地址: 使用 location.reload() 刷新(location.href 或者  location.replace()  ...

  2. vue 详情跳转至列表页 实现列表页缓存

    甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该 ...

  3. 简述Vue项目中返回上一页

    1.背景 由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-)或back()是行不通的,所以,我们使用到了Vue中的编程式导航. 2.基本使用 定义返回按钮: < ...

  4. 《vue.js实战》练习---标签页组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. vue路由跳转到登录页

    // 第一种 { path:'/', component: require('../components/Login.vue') }, // 第二种 { path: '/', redirect: '/ ...

  6. 翻页组件page-flip调用问题

    翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...

  7. vue翻页器,包括上一页,下一页,跳转

    翻页组件 -- 子组件<template> <div class="pager-wrapper" ref="pager"> <di ...

  8. vue使用路由跳转到上一页

    this.$router.go(-1) <template> <div> <button class="btn btn-success" @click ...

  9. vue 实现返回上一页不请求数据keep-alive

    常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...

随机推荐

  1. Java字节流Stream的使用,创建方法

    首先:FileOutputStream写入数据文件 学习父类的方法 使用子类的对象 步骤: 1:子类中的构造方法   作用  :绑定输出的目的地 FileOutputStream fos= new F ...

  2. 生成Release apk

    [生成Release apk] 1.使用Java SDK中的keytool生成keystore. Java SDK一般位于:C:\Program Files\Java\jdkx.x.x_x\bin. ...

  3. pecan API调用

    1.在PasteDeploy部署caesar-api服务时,setup_app中建立app,app中设置hooks,hooks负责加载conf配置文件和数据库连接 self.storage_conne ...

  4. Unity3D中的高级摄像机跟随

    在Unity3D中,先调整MainCamera在场景中的位置,然后把脚本挂到MainCamera上,摄像机跟随分为简单的摄像机跟随和高级摄像机跟随. 简单摄像机跟随: public class Cam ...

  5. matlab画图标题自定义字体大小

    title('标题','fontname','Times New Roman','Color','b','FontSize',20);字体是Times New Roman,颜色是蓝色('b'即blue ...

  6. cf-Global Round2-D. Frets On Fire(二分)

    题目链接:http://codeforces.com/contest/1119/problem/D 题意:给n(<=1e5)个数s[i],i=1..n,(0<=s[i]<=1e18) ...

  7. 二叉树,B树,B+树,红黑树 简介

    什么是二叉树? 在计算机科学中,二叉树是每个节点最多有两个子树的树结构.通常子树被称作“左子树”和“右子树”,左子树和右子树同时也是二叉树.二叉树的子树有左右之分,并且次序不能任意颠倒.二叉树是递归定 ...

  8. TOJ5398: 签到大富翁(简单模拟) and TOJ 5395: 大于中值的边界元素(数组的应用)

    Python代码!!! 5395 传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=53 ...

  9. vue 使用a+ router.push的形式跳转时,地址栏不显示参数

    解决办法: a链接不要写href 属性

  10. 使用pyqt写了一个检查大数据环境的gui

    通过pyqt做了一个大数据最佳实践检查的gui界面 1.首先是需要用到的模块 from PyQt5.QtWidgets import QApplication from PyQt5.QtWidgets ...