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) {&nbsp; &nbsp; if (savedPosition) {&nbsp; &nbsp; //真正起作用的是这里,else里面的if删除了，免得误导&nbsp; &nbsp; &nbsp; &nbsp; return savedPosition&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return { x: 0, y: to.meta.savedPosition || 0 }&nbsp; &nbsp; }},2.在router.js里面需要记录位置的单页面里面meta: {&nbsp; title: '列表页',&nbsp; keepAlive:true},3.App.vue里面<div id="app">&nbsp; <keep-alive >&nbsp; &nbsp; &nbsp; <router-view v-if="$route.meta.keepAlive"></router-view>&nbsp; </keep-alive>&nbsp; <router-view v-if="!$route.meta.keepAlive"></router-view></div>这样写的意义就是不缓存所有页面，哪个地方写了 keepAlive：true,哪个地方就记录位置(加缓存)4.位置确实记录上了(加缓存，返回不刷新页面)，也就是说，返回不触发created，所以有些页面需要返回触发的东西都写在activated里面。其实整个过程很简单，代码也很干练，因为这是路由自带的功能，只不过之前没有发现罢了