关于微信浏览器后退按钮如何回到之前列表页的指定位置

Question

具体情况是我在微信中网页开发，用的是vue,然后有个文章的列表，文章的链接是微信的链接点进去之后就是微信的详情页，这时候我回退的话就会重新刷新页面，这样就不太可能定位到之前看到列表的位置了，能有什么办法可以解决么？

Answer 1

你这个不是后退页面刷新，而是组件重绘，要实现你要的功能路由篇也说明了，可以使用滚动行为来实现，不过路由模式有限制，你可以查看下文档。

Answer 2

<keep-alive>
    <router-view v-if="needKeepAlive"></router-view>
</keep-alive>
<router-view v-if="!needKeepAlive"></router-view>

可以使用keepalive

Answer 3

1、使用keep-alive

<keep-alive>
    <router-view></router-view>
</keep-alive>

2、使用vue-router的钩子函数

let indexScrollTop = 0
router.beforeEach((route, redirect, next) => {
  if (route.path !== '/') {
    indexScrollTop = document.body.scrollTop //开始切换路由前将当前页面scrollTop存放到变量
  }
  next()
})

router.afterEach(route => {
  if (route.path !== '/') {
    document.body.scrollTop = 0
  } else {
    Vue.nextTick(() => {
      document.body.scrollTop = indexScrollTop //路由切换完成设置scrollTop
    })
  }
})