项目中有一需求,需要根据不同的页面路径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. EVIL TWIN AP

    git clone https://github.com/P0cL4bs/3vilTwinAttacker.git cd 3vilTwinAttacker/ ./installer.sh --inst ...

  2. 【pyspider】启动爬虫后在results页面没有看到结果

    今天根据书上的介绍写了一个简单爬虫,爬取豌豆荚里面APP的基本信息,但是在调试结果正常后,发现跳转到result页面后没有看到结果. 后来上网查了一下,发现要在def detail_page(self ...

  3. CSS垂直翻转/水平翻转提高web页面资源重用性

                    /*水平翻转*/ .flipx {     -moz-transform:scaleX(-1);     -webkit-transform:scaleX(-1);   ...

  4. zabbix主动监测客户端设置

    主动/被动模式 主动模式和被动模式的区别一开始我也非常模糊,其实这是zabbix的两种工作方式,是相对于zabbix的agent端来说的,定义为: 主动模式:zabbix的agent端,也就是客户端, ...

  5. c++ 面试题(汇总)

    1,extern 关键字作用: http://www.cnblogs.com/lzjsky/archive/2010/11/24/1886686.html 2,static 关键字作用: https: ...

  6. AttributeError: 'dict' object has no attribute 'iteritems'

    在python3.6中运行 sortedClassCount = sorted(classCount.iteritems(), key=operator.itemgetter(1), reverse= ...

  7. nexus(Maven仓库私服)的安装、配置、使用和仓库迁移

    简介 Nexus下载:点击进入 Nexus 是Maven仓库管理器,如果你使用Maven,你可以从Maven中央仓库 下载所需要的构件(artifact),但这通常不是一个好的做法,你应该在本地架设一 ...

  8. unity填色绘画游戏Drawing Coloring Extra Edition

    . 下载地址: https://item.taobao.com/item.htm?spm=0.7095261.0.0.2e611debLdF3mf&id=576153069662

  9. f5 SNMP配置

    1.选择监控终端 2.配置团体名称:

  10. python脚本删除文件与目录的命令

    1. 删除文件的命令 import os os.remove(file) os.unlink(file) 2.删除目录的命令 import shutil shutil.rmtree(directory ...