背景

        使用uniapp开发手机APP,在列表--新增--列表,这时候如果在列表页面手机物理返回,会回到新增页面去了,而我想达到的目的是  从列表页面如果返回的话要到首页去

方案1:使用uniapp的onBackPress方法,它可以监听手机的物理返回操作

出现的问题:

        因为APP中我使用到了权限控制,也就是必须登录才可以正常访问,所以使用了vue中的router。问题就出在这里,如果我用了vue-router,然后又在页面中使用onBackPress,那么会先执行路由守卫,路由守卫执行完以后才会执行onBackPress,最终的结果就是报错:路由守卫中已经在进行跳转了,onBackPress不可以再次用代码操作跳转

        所以,方案一不可行

方案2:通过页面销毁,配合uni.navigateBack() 来达到目的

具体描述

        从列表页面跳转到新增页面/修改页面时,使用redirectTo方法,这样会销毁列表页面并进行跳转,新增/修改页面保存成功后再跳转到列表页面。这样基本可以达到目的。

但是还是会存在问题:如果我从列表页面点进去详细页面,这时候什么操作都不做就物理返回,它并不会返回到列表页面,而是返回到首页去,因为列表页面已经被销毁了

        所以,方案二不可行

方案三:使用事件总线(eventBus)的方式来处理

具体描述

        用发布订阅的思想,不管是列表页面,还是新增/修改页面都不销毁。当新增/修改页面成功后,通知列表页面做数据刷新。

        这种思路是没有问题的,只是实现的技术方式有问题。用这个的前提是首先在列表页面做事件监听,然后新增/修改里面发布事件,当修改或者新增成功后,发送通知让列表页面刷新数据。

事件总线存在两个问题

        1:用过事件总线的都知道,页面销毁时必须要移除事件,不然很容易造成内存泄露等问题, 而这里的需求是跳转时不销毁页面,物理返回时才能达到我想要的效果。此时,销毁和移除事件总线就互斥了,不好处理        

        2:这个的层级是列表-->新增/修改页面,也就是先有订阅,然后才是发布,这样我总感觉有什么问题,但是没去验证

        所以,方案三不可行

方案四:使用vuex+监听+navigateBack

具体描述

        其实还是用发布订阅的思想,只不过形式变了,变得可行了

实现思路

        1:vuex中定义一个变量  refresh: false

        2:列表页面监听该变量

watch:{
			// 监听refresh是否为true,如果为true,需要重新加载列表数据
			'$store.state.refresh':function(newFlag, oldFlag){
			   if(newFlag==true){
				   this.getList()
				   // 刷新完后将flag复位
				   this.$store.commit('set_refresh',false)
			   }
			}
		},
		methods: {

        3:新增/修改页面保存成功时,修改vuex中的状态,然后调用uni.navigateBack()方法

this.$store.commit('set_refresh',true)
uni.navigateBack();

        方案四可行!!!

这个问题用了整整一上午才解决,特此记录。

上面不可用的那三种方法其实是三种思路,在遇到其他问题时可能是一种解决办法,特此记录

Logo

前往低代码交流专区

更多推荐