uniapp中手机APP控制物理返回

背景

        使用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();

        方案四可行！！！

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

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