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

列表页关键代码

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;
    }
})

原文地址：https://www.cnblogs.com/niubenbit/p/11437855.html