关于vue返回上一个路由时回到原先滚动的位置

Question

我使用beforeRouteLeave实现页面返回，但好像没什么效果，下面是代码

这个是路由配置，

这个是路由跳转

我滚动了这么多，然后点击列表跳转，然后点击

浏览器的返回按钮，但是没什么效果

滚动条还是回到了顶部，不想用keep-alive的写法，要用history模式的。。不知道该怎么写了，麻烦大神帮忙解答一下，万分感谢

Answer 1

可以用 keep-alive把当前页面存进内存里 。

  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
    
    </router-view>      
  </div>

把需要这个需求的页面在路由里面配置一下就可以了

{
  path: '/guessContent',
  name: 'guessContent',
  meta: {
    keepAlive : true 
  },
  component: (resolve) => require(['@/views/entertainment/guessContent'], resolve)
},

Answer 2

在vuex里面记录每一个路由的scrollY，然后vue-router的钩子里做相应存取。
给个思路。
beforeEach里把from的scrollY保存到vuex里，然后afterEach里取出to的scrollY，进行跳转，window.scrollTo之类方法随便。

Answer 3

这个滚动条还原的也只能在history模式下用

你路由切换后的 savedPosition有值吗？

你先输出看看

Answer 4

和楼上差不多，我也遇到过这个问题。基本思路就是离开的时候记录滚动高度，第二次进入的时候使用window.scrollTo返回到上次记录的位置。