vue route-link跳转之后再返回记录刚刚访问的位置(图片列表页)

Question

1.vue页面跳转之后记录跳转之前的位置，返回之后继续回到刚刚访问的位置(单页面应用)
2.这是我在created里面的代码，能拿到scrollTop值，就是返回之后设置不上
let ls = window.localStorage;

            if (ls.getItem('sTop')) {
                let oldStop = ls.getItem('sTop');

                // 获取到的值来设置页面滚动条的位置
                if (document.documentElement.scrollTop) {
                    document.documentElement.scrollTop = oldStop;
                } else {
                    document.body.scrollTop = oldStop;
                }
            } else {
                console.log('抱歉，找不到滚动条的值');
            }
            // 监听页面滚动条的状态（是否滚动）
            window.addEventListener('scroll', function() {
                // 滚动时获取页面滚动条的位置
                var sTop =document.body.scrollTop || document.documentElement.scrollTop;
                console.log(sTop)
                // 滚动条的位置保存到本地存储里面
                ls.setItem('sTop', sTop);
            }, false);

3.似乎没看到任何不妥之处啊

Answer 1

问题自己解决了，之前好多人说建议用vuex,vuet等。但是终究没有用。解决办法：
1.在router.js里面，
scrollBehavior(to, from, savedPosition) {

    if (savedPosition) {
    //真正起作用的是这里,else里面的if删除了，免得误导
        return savedPosition
    } else {
        return { x: 0, y: to.meta.savedPosition || 0 }
    }
},

2.在router.js里面需要记录位置的单页面里面

meta: {
  title: '列表页',
  keepAlive:true
},

3.App.vue里面
<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>
这样写的意义就是不缓存所有页面，哪个地方写了 keepAlive：true,哪个地方就记录位置(加缓存)
4.位置确实记录上了(加缓存，返回不刷新页面)，也就是说，返回不触发created，所以有些页面需要返回触发的东西都写在activated里面。其实整个过程很简单，代码也很干练，因为这是路由自带的功能，只不过之前没有发现罢了

Answer 2

单页，有用router，可以用router的scrollBehavior：

const router = new Router({
    //当按下浏览器前进或返回按钮时，会返回记录位置，否则回到顶部
    scrollBehavior(to, from, savedPosition) {
        if(savedPosition) {  
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    },

Answer 3

需要记下的时候用vuex记录下滚动条位置，但跳转回来了在mounted（）{回滚}

Answer 4

设置不上的原因应该是dom还没有渲染完成，这时候还没有滚动条，设置scrollTop是没有用的，我之前也遇到过这个问题，数据是从后台请求回来的，当时纠结了好久，所以你需要在nextTick()方法中去设置，也就是页面必须有滚动条了才会生效。