使用vue-router实现返回

时间:2023-03-09 02:11:40
使用vue-router实现返回

  在vue项目中使用vue-router做路由,做到返回页面的逻辑时,由于window.history.back满足不了返回的需要,故想通过

window.addEventListener('popstate', function(event) {}) 解决,无耐该事件执行的次数不固定,不知什么原因,反正没找出来。

  页面的跳转逻辑是,首页跳A页面,然后A页面触发事件跳转到B页面,B页面提交后再跳到A页面,这时候你点击返回按钮的时候返回的路径依次是:A->B->A->首页,而想要的效果是在最后B跳A的这个页面中,点击返回按钮跳到首页。

  假设首页的路径为'/index',A页面的路径为'/coupon',B页面的路径为'/couponAdd',实现如下:

  使用vue-router实现返回

一开始是想在beforeRouteLeave中做判断,使用vue-router实现返回,这样判断出现问题了,如果一开始从A页面跳转到B页面的话,from.fullPath=='/coupon'&&to.fullPath=='/couponAdd' 为true,也就是它也会跳转到首页,不会跳转到B页面。然后我又想到了另外下个函数,route的beforeRouteEnter,然后在data中添加一个属性,用来做判断,使用vue-router实现返回,无耐它不能获取组件实例,再想。

经过再次思考我决定用sessionStorage存储数据,代码如下:

使用vue-router实现返回

backFlag就是用来判断是否是从B跳转到A,如果是就把它置为true,然后在beforeRouteLeave时再判断根据该值跳转,如果它为false,说明是从A跳转到B,就跳转呗,若为true的话,说明它是从B跳转到A,然后再点击的返回,此时this.$router.push({path:'/index'});直接跳转到首页,问题解决。