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

应用场景

建立一个自动登录的中间页，如果自动登录，则自动跳转到内部应用。如果自动登录失败，则显示用户名密码输入页。
发现用户点击后退时，后退到了中间页，由于自动登录在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);