Vue详情页回列表页保存原数据与位置。

Posted 2022-09-13 niubenbit

列表页关键代码

mounted() 
       
        //非从详情页返回时正常加载数据
        if (!this.$route.meta.isBack) 
            //执行加载数据的方法
           //重新加载页面
         else 
            // this.onFetching = true;
            this.curPage = sessionStorage.getItem(‘curPage‘);
            //存储分页第几页，用于返回列表页继续可以分页
    
            ...
        
        //执行完初始化isBack
        this.$route.meta.isBack = false 
    ,
    beforeRouteLeave(to, from, next) 
        if(to.name == ‘bbs_detail‘) 
            //跳转为详情页，就保存当前滚动的页数
            sessionStorage.setItem(‘curPage‘, this.curPage);
         else 
           //跳转为非详情页，滚动的页数归1
            sessionStorage.setItem(‘curPage‘, 1);
        
        next();
    ,

main.js

// 返回定位
router.afterEach((to,from) => 
    let path = to.path;
    //判断需要定位的路由地址
    if(path == ‘/bbs‘)
                //获取储存起来的位置
        let scrollTop = sessionStorage.getItem(‘scrollTop‘);
        if(scrollTop)
            setTimeout(()=>
                //页面渲染完成后，在滚动，位置才是正确的，所以加个延迟
                document.getElementById(‘app‘).scrollTop = scrollTop; 
                sessionStorage.setItem(‘scrollTop‘,0);   //定位后还原储存位置信息
            ,300)
        
    else
        //除了特定地址，其他的都返回顶部
        
        sessionStorage.setItem(‘scrollTop‘, document.getElementById(‘app‘).scrollTop*1);//储存位置

        document.getElementById(‘app‘).scrollTop = 0; 
    
)