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