在最近的项目中,需求提出在一个页面点击返回时,不返回到历史进入的页面,返回到指定的页面。因为项目是用Vue实现的,所以首先考虑到在路由上下功夫。解决这个问题有很多办法,可以在离开这个页面的时候判断增加路由的逻辑,那我们就来看下beforeRouteEnter,beforeRouteLeave,beforeRouteUpdate执行的时机。
如果该问题希望通过使用beforeRouteEnter组件使用,那可以通过判断在next中增加逻辑。但是不能访问this,因为这个时候组件实例还没有创建。但是可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
在看了导航守卫的用法后,因为考虑到我这个问题有一个特殊的跳转要求,除了返回键不能跳转到上一页外,点击本页的按钮又可以跳转到上一页,所以直接在beforeRouteLeave判断from,然后直接to指定页就会出现不能在跳转到上一页的问题,显然不能从根本上解决问题。所以此处还用到了路由实例replace方法,push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。
说了这么多都是一个解决的方法,读者有其他的解决方案可以留言交流。