uniapp页面后退时更改页面内容【uniapp如何区分页面是跳转来的还是后退来的】【伸手党福利】

news/2024/11/29 3:53:57/

目录

    • 应用场景
      • 实现目标
      • 分析技术难点
    • 解决方法
    • 另附:自动登录判断跳转页面
    • ps2 这个案例的实际简单的解决方法

应用场景

建立一个自动登录的中间页,如果自动登录,则自动跳转到内部应用。如果自动登录失败,则显示用户名密码输入页。
发现用户点击后退时,后退到了中间页,由于自动登录在created里面,所以没有执行,直接自动登录失败。

实现目标

判断用户是否是点击后退按钮进入的此页面,如果是,则自动执行后退到主页面。

分析技术难点

需要分辨页面是跳转来的还是后退来的
如果是后退来的,则跳转到其他页面

解决方法

奇葩思想
pages.json当中加入

“meta”:{
“keepAlive”: true
}
内容:

,{"path" : "pages/pc/common/detail","style" :                                                                                    {"navigationBarTitleText": "","enablePullDownRefresh": false},"meta":{"keepAlive": true}}

vue页面中加入activated()

activated() {console.log("window.performance.navigation.type:", window.performance.navigation.type);if (window.performance.navigation.type === 2) {console.log('User navigated back to this page');} else {console.log("正向访问");}},created(e) {console.log("window.performance.navigation.type1!!:", window.performance.navigation.type);if (window.performance.navigation.type === 2) {console.log('User navigated back to this page1!!');} else {console.log("正向访问");}//监听自定义事件,该事件由左侧列表页的点击触发  console.log(e);uni.$on('detail', (e) => {console.log(e);// 执行 detailPage组件,即:/pages/detail/detail.vue 页面的load方法  // this.$refs.detail.load(e.detail);})}

实测发现:

  • 正常跳转进入时,window.performance.navigation.type =0,activated()不执行,created()执行

    在这里插入图片描述

  • 刷新或者从浏览器中直接打回车刷新:window.performance.navigation.type =1,activated()不执行,created()执行
    在这里插入图片描述

  • 点击跳转回来此页面时,window.performance.navigation.type =1,activated()执行,created()执行
    在这里插入图片描述

  • 点击后退重新进入此页面时,window.performance.navigation.type =1,activated()执行,created()不执行
    在这里插入图片描述

参考:
在这里插入图片描述


另附:自动登录判断跳转页面

LoginOauthToken(token) {// for移动应用平台console.log(this.op.from + '?userId=' + this.op.username + "&oauth_token=" + this.op.oauth_token);this.$http.post('/otp/loginWithToken', {refresh_token: token}).then(res => {console.log("res.data.result");console.log(res.data.result);// let t = JSON.parse(res.data.result)let t = res.data.result//uni.showToast({//	icon: 'none',//	title: t,//	duration: 200000//})console.log("this.op");console.log(this.op);console.log(this.op.from + '?userId=' + t.username + "&oauth_token=" + t.oauth_token);// 在这里进行跳转,如果有oauth_token,则直接对————使用oauth_token进行跳转//双保险setTimeout(() => {window.location.href = this.op.from + '?userId=' + t.username + "&oauth_token=" + t.oauth_token}, 300)window.location.href = this.op.from + '?userId=' + t.username + "&oauth_token=" + t.oauth_token}).catch(err => {uni.showToast({icon: 'none',title: '发起失败,请联系管理员!' + err,duration: 20000})console.log(err);// 临时报错解决措施// window.location.href = window.location.href})

ps2 这个案例的实际简单的解决方法

直接使用以下代码跳转,不留历史记录。

location.replace(this.href);

http://www.ppmy.cn/news/42006.html

相关文章

三、线程状态【3/12】【多线程】

线程的状态3. 线程的状态3.1 观察线程的所有状态3.2 线程状态和状态转移的意义3.3 观察线程的状态和转移3. 线程的状态 3.1 观察线程的所有状态 线程的状态是一个枚举类型 Thread.State public class ThreadState {public static void main(String[] args) {for (Thread.State…

Spring核心概念

一、Spring是什么?如何理解Spring 我们通常所说的Spring,其实也就是Spring Framework ,是java圈子里应用非常广泛的一种框架,如果用一句话概括,那就可以说Spring是包含了众多工具方法的IoC容器。 如果需要对这个概述做进一步阐释…

基于神经辐射场NeRF的SLAM方法

随着2020年NeRF[1]的横空出世,神经辐射场方法(Neural Radiance Fields)如雨后春笋般铺天盖地卷来。NeRF最初用来进行图像渲染,即给定相机视角,渲染出该视角下的图像。NeRF是建立在已有相机位姿的情况下,但在…

Linux kernel中几个文件的作用

apic/vector.c 是 Linux 内核中的一个文件,其中包含用于处理高级可编程中断控制器 (APIC) 上的中断向量的代码。 中断向量是与设备生成的每个中断请求相关联的唯一标识符。 当中断被触发时,CPU使用向量跳转到相应的中断服务程序(ISR&#xff…

【数据结构与算法】一、数据结构的基本概念

文章目录一、数据结构的基本概念1.1 数据结构的研究内容1.2 数据类型和抽象数据类型1.3 算法和算法分析1.3.1 算法的时间复杂度1.3.2 算法时间效率的比较1.4 知识回顾一、数据结构的基本概念 1.1 数据结构的研究内容 1.2 数据类型和抽象数据类型 抽象数据类型(ADT…

浅谈 如果做微服务了 这个模块怎么去划分?

如果做微服务了 这个模块怎么去划分? 还是高内聚 低耦合的一个思想吧 ,单一职责的设计原则,也是一个封装的思想吧, 业务维度: ​ 按照业务的关联程度来决定,关联比较密切的业务适合拆分为一个微服务&…

阿里云linux云服务器 安装指定版本node.js

我们在实例管理中找到自己的服务器 然后点击右侧的 远程连接 接着点击理解登录 进入命令窗口 我们在这上面输入 curl -h阿里云的服务器都还是最好会有 curl的 然后 我们输入 sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash下把nv…

CCC 数字钥匙学习笔记 - 车主配对命令

整理了一下CCC组织的汽车数字钥匙Release 3中关于车主配对Owner Paring,过程的APDU指令和数据说明。基本可以算是在车端的角度进行车主配对操作。里面的章节表格编号,都按照CCC数字钥匙Release 3文档中的编号走,方便将来检索对照。 车主配对…