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

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里面。其实整个过程很简单，代码也很干练，因为这是路由自带的功能，只不过之前没有发现罢了