加入路由钩子和元数据后路由跳转问题

Question

老师，在手机网页浏览时，这个时不时会返路由跳转错误，请问是什么错误，这是配置：


这是录屏：http://shulao.usa3v.vip/WeChat_20220511171447.mp4

Answer 1

扬_灵 2022-05-12 08:40:44

同学你好，看一下页面跳转方式使用的是push还是replace，如果用router.push跳转，history中记录所有的历史页面;如果用router.replace跳转，会导致丢失部分历史页面。

• 提问者 树佬 #1

  老师，我在shelfDetail 的back 方法和shelfCategory 的shelfTitle 组件的back 方法里面都是用了go（-1）跳转，没有用push 和replace ，这样在电脑上调试没问题，但是在手机上网页进入就有两个问题，①有时从storeShelf 主页进入StoreDetail 后点击icon-back就会回到storeHome ；②在shelfCategory 进入storeDetail 后点击icon-back 返回有时也不会回到storeCategory，反而直接到了storeShelf 书架主页甚至storeHome 图书主页，该怎么调试呢？
  未成功的解决思路：关于第一个问题，我试了在storeDetail 组件，beforeRouteEnter 和beforeRouteUpdate 钩子中，分别尝试在进入之前将 this.$router.from.path 保存起来等到点击icon-back 的时候在判断这个from.path 是不是来自 '/store/shelf' 或者是 '/store/category' ，如果是的话就用push跳转到对应的路由，如果不是的话就go（-1）跳转回去，但是卡在了不知道该如何保存from.path 到data 中。
  这是录屏：http://shulao.usa3v.vip/9b8a54656e327257a601646e2d3c4099.mp4
  这是代码（view-router中加入了过渡样式的判断与绑定）：https://git.imooc.com/Shulaolao/Vue_reading_app2

• 扬_灵 回复 提问者 树佬 #2

  同学你好，这个和go方法没有关系，go函数只是从历史记录前进或者后退，要查看的是书架进入详情使用的跳转方法，手机端调试需要使用vconsole模块，想要调试的话可以打印变量路由历史记录进行查看，思路是 在vuex中定义一个变量每次路由跳转时将路由信息存储，返回的时候查看该变量中的历史记录。 https://segmentfault.com/a/1190000039848829

• 提问者 树佬 回复 扬_灵 #3

  一知半解这篇文章哈哈哈