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; } })
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步