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==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...
随机推荐
- python全栈 流程控制;while 循环 格式化输出 运算符 及编码
python全栈开发 1循环 2break和continue的区别 3格式化输出 4运算符 5编码 一.流程控制while循环 while条件: 代码块(循环体) 1.死循环; while True; ...
- streaming窗口操作
之前一直对窗口操作不太理解.认为spark streaming本身已经是分片计算,还需要窗口操作干啥. 窗口操作最为简单易懂的场景就是,在M时间间隔计算一次N时间内的热搜.当M=N的时候,就像上述所说 ...
- Excel图标布局,图表样式,图标元素
一.图标布局----图表元素的增删改 * 快速布局: 更改图表的整体布局,主要是图表标题,坐标轴,图例,网格线 * 操作如下: 选中数据源,Ctrl+Q 出现图表,选中图表,在上方选择设计, 共有10 ...
- vmware 共享文件夹
参考 https://jingyan.baidu.com/article/7f766daf7866be4101e1d0ed.html 只是设置共享文件夹选项还不行,需要从安装vmware的安装路径中找 ...
- 【Spider】使用CrawlSpider进行爬虫时,无法爬取数据,运行后很快结束,但没有报错
在学习<python爬虫开发与项目实践>的时候有一个关于CrawlSpider的例子,当我在运行时发现,没有爬取到任何数据,以下是我敲的源代码:import scrapyfrom UseS ...
- cf-Global Round2-C. Ramesses and Corner Inversion(思维)
题目链接:http://codeforces.com/contest/1119/problem/C 题意:给两个同型的由0.1组成的矩阵A.B,问A能否经过指定的操作变成B,指定操作为在矩阵A中选定一 ...
- iPhone X系列 的获取 - 安全区顶部和底部高度
///1. 获得当前窗口 var JY_WINDOW: UIWindow? { get{ if let app = UIApplication.shared.delegate as? AppDeleg ...
- sql backup
create or replace procedure P_updateasbegin update security_price p set p.closing_price = (select MI ...
- SpringMVC之controller篇1
概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Spring 2.5 又为 Spring MVC 引入了注解驱动功能.现在你无须让 Controller 继承任何接口,无需在 ...
- Eigen解线性方程组
一. 矩阵分解: 矩阵分解 (decomposition, factorization)是将矩阵拆解为数个矩阵的乘积,可分为三角分解.满秩分解.QR分解.Jordan分解和SVD(奇异值)分解等,常见 ...