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

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.似乎没看到任何不妥之处啊

回答:

问题自己解决了,之前好多人说建议用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里面。其实整个过程很简单,代码也很干练,因为这是路由自带的功能,只不过之前没有发现罢了

回答:

单页,有用router,可以用router的scrollBehavior:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注