如何处理spa中,用户刷新页面导致的vue-router无法go(-1)的问题?

这个问题困惑了很久:
对于正常的spa应用需要为每个路由的配置对应的回退地址么?
我现在采用的是官方文档之中的

// 后退一步记录,等同于 history.back()
router.go(-1)

方法来进行后退的。
这样做的好处便是省去处理路由跳转交错,导致回退路径不唯一的问题。
但是如果将某个页面进行分享的话,这个页面的后退就因为history无记录而失败。

针对这种情况我一开始想到的办法是为每次路由跳转配置参数,带上对应的跳转前的path或者name参数。这样虽然可以避免刷新或者分享后无法后退的问题,但是未免太多此一举吧?

现在我尝试在vuex之中记录下每次路由变化的次数:

router.afterEach(route => {
  // 提交路由跳转次数
  store.commit('addRouterChangeCount')
})

在页面中加入getters来获取这个值,判断是否等于1来进行分别对后退进行处理:

if (this.$store.getters.routerChangeCount === 1) {
  return '/backPath'
} else {
  return ''
}

但是进入这个页面会有多种情况的话,这个页面只能后退到其中某一个。

我最后想到的是把用户每次访问的路由本地存储起来,在刷新后利用刚刚的方法进行读取处理。但是总感觉不是很好?

所有向各位dalao们求教,有没有一种优雅又简介的方法处理spa之中的页面后退?

阅读 5.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题