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

news2025/6/19 1:05:08

目录

    • 应用场景
      • 实现目标
      • 分析技术难点
    • 解决方法
    • 另附:自动登录判断跳转页面
    • 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.coloradmin.cn/o/411703.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文心一言对于宣传文案理解

前言 前段时间对于文心一言开放部分内测邀请,有幸获得邀请内测权限!抱着试一试的态度对其进行了使用,结果还是比较满意的。我们来看一下我所说的满意是否能够达到你的要求!!! 使用逻辑 文心一言的使用还…

静态路由的原理和配置(理论详细实验全面)

第五章:静态路由 目录 第五章:静态路由 5.1路由器的工作原理 5.1.1路由器根据路由表转发数据 5.1.2 路由信息获取的方式 5.2路由选路原则 5.2.1最长匹配原则 5.2.2路由优先级 5.2.3路由度量值 5.3静态路由 5.3.1静态路由实验 5.3.2缺省路由实…

多模态模型技术综述

多模态架构导语1. Image2Text1.1 图像数据集准备1.2 图像to文本的生成模型1.2.1 M2 模型(Meshed—Memory Transformer)Memory-Augmented EncoderMeshed Decoder2. text2Image2.1 生成对抗网络(GAN)2.1.1 文本生成图像基础GAN2.1.2…

4.1 不定积分的概念与性质

思维导图: 学习目标: 学习不定积分,我会采取以下几个步骤: 1.学习基本的积分表:首先,我会学习基本的积分公式,例如幂函数、指数函数、三角函数、反三角函数等的积分公式。这些公式是不定积分…

enote笔记法之附录1——“语法词”(即“关联词”)(ver0.22)

章节:enote笔记法之附录1——“语法词”(即“关联词”)(ver0.22) 上面的是截屏的完整版,分割线下面的是纯文字版本: 作者姓名(本人的真实姓名):胡佳吉 居…

计及需求侧响应日前、日内两阶段鲁棒备用优化(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

机器学习实战:Python基于K近邻KNN进行分类预测(四)

文章目录1 前言1.1 K近邻的介绍1.2 K近邻的应用2 二维数据集演示2.1 导入函数2.2 导入数据2.3 训练模型及可视化3 莺尾花数据集全数据演示3.1 导入函数3.2 导入数据3.3 训练模型及预测4 模拟数据集演示4.1 导入函数4.2 模拟数据集4.3 建模比较5 马绞痛数据pipeline演示5.1 下载…

App 自动化测试

一、移动端测试基础 1 移动端自动化环境搭建 1.1 java安装 1.2 Android SDK安装 SDK (Software Development Kit) 软件开发工具包是软件开发工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。Android SDK 就是 Android 专属的软件开…

ERTEC200P-2 PROFINET设备完全开发手册(5-1)

5.1 非周期通讯 非周期通讯,顾名思义,表示这种通讯并不是在每个通讯周期都要进行的通讯,也叫做异步通讯或者非实时通讯。非周期通讯访问的数据叫做数据记录(record data)。一般情况下,以下三个名词表示的是…

ubuntu下常用命令(嵌入式)

开发环境: ubuntu-14.04.1-desktop-i386 VMware-workstation-full-10.0.2-1744117.1398244508.exe lsb_release -a 查看ubuntu版本 ctrlalta 打开控制台 du -sh 文件/文件夹 查看文件或文件夹的大小 su 或 su root 都是切换到root账户 su 普通用户 切换到普…

CSS2023年面试题汇总~~~~持续更新中!!!!

文章目录1.元素水平垂直居中的方法有哪些?2.flex布局3.position定位4.display:none与visibility:hidden的区别1.元素水平垂直居中的方法有哪些? 利用定位margin:auto利用定位margin:负值利用定位transformtable布局flex布局grid布局 其中2,…

风电的Weibull分布及光电的Beta分布组合研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

二、线程的Thread 类及常见方法【2/12】【多线程】

线程的Thread 类及常见方法2. Thread 类及常见方法2.1 Thread 的常见构造方法2.2 Thread 的几个常见属性2.3 启动一个线程-start()★★★start和run的区别★★★run不会创建线程 是在原来的基础上 执行代码start 创建线程,在新的线程 执行代码2.4 中断一个线程★★★…

常见面试题之Redis篇

1.1.Redis与Memcache的区别? redis支持更丰富的数据类型(支持更复杂的应用场景):Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,zset,hash等数据结构的存储。memcache支持…

Open Inventor 2023.1 Crack

发行说明 Open Inventor 2023.1(次要版本) 文档于 2023 年 4 月发布。 此版本中包含的增强功能和新功能: Open Inventor 10 版本编号更改体积可视化 单一分辨率的体绘制着色器中与裁剪和 ROI 相关的新功能MeshVizXLM 在 C 中扩展的剪辑线提…

拟牛顿法:python代码实现

文章目录拟牛顿法待优化实例scipy工具包实现BFGS自编Python实现BFGS拟牛顿法 在梯度类算法原理:最速下降法、牛顿法和拟牛顿法中,介绍了梯度类算法求解优化问题的设计思路,并以最速下降法、牛顿法和拟牛顿法为例,描述了具体的算法…

3.9、互斥锁(互斥量)

3.9、互斥锁(互斥量)1.互斥锁(互斥量)的介绍2. 互斥量相关操作函数3.互斥量函数的使用介绍①pthread_mutex_init②pthread_mutex_destroy③pthread_mutex_lock④pthread_mutex_trylock⑤pthread_mutex_unlock3.利用互斥锁实现线程…

计讯物联双网口工业路由器TR321助力货轮冷链监测解决方案高质量落地

政策背景 国务院办公厅印发我国冷链物联流域第一份五年规划——《“十四五”冷链物流发展规划》(以下简称“规划”)。《规划》聚焦冷链物流体系、冷链运输、冷链物流服务、冷链物流创新及冷链物流监管体系等方面,对冷链物流的全流程、全环节…

Ficow 的 AI 平台快速上手指南(ChatGPT, NewBing, ChatGLM-6B, cursor.so)

本文首发于 Ficow Shen’s Blog,原文地址: Ficow 的 AI 平台快速上手指南(ChatGPT, NewBing, ChatGLM-6B, cursor.so)。 内容概览 前言OpenAI —— ChatGPT微软 —— NewBing智谱AI —— ChatGLM-6BAI生成代码 —— cursor.so总结 前言 现在各种AI工具大…

虚拟机网络配置

点击【编辑虚拟机设置】,点击【网络适配器】,选择【桥接模式】 选择好之后退回主页,点击【编辑】,选择【虚拟网络编辑器】 添加一个【VMnet8】的网络名称 点击【开启虚拟机】 输入账户密码,输入【cd /etc/sysconfig/ne…