vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)(vue 跳转页面)

编辑：rootadmin

vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能) 一、页面返回后不刷新 1.在路由（router/index.js）中，对不刷新的页面设置：meta: { keepAlive: true //true为需要缓存，false为不需要缓存（不需要的也可以不加） }, 2.在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>

推荐整理分享vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)(vue 跳转页面)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue点击页面跳转,vue页面跳转原理,vue跳转当前页面,vue页面跳转原理,vue实现跳转页面,vue页面内跳转,vue页面内跳转,vue 跳转页面,内容如对您有帮助，希望把文章链接给更多的朋友！

这时返回就不会触发created和mounted

二、记录滚动条位置，并在页面显示时设置它： 1.在data中定义scrollTop： 0, 2.挂载： //离开路由之前执行的函数,可用于页面的反向传值，页面跳转。 beforeRouteLeave(to, from, next) { console.log("1212-beforeRouteLeave") // 记录滚动条位置 this.scrollTop = document.documentElement.getElementsByClassName("itemBoxs")[0].scrollTop || 0; //组件写法 this.scrollTop = document.documentElement.getElementById('app').scrollTop || 0; //全局写法 console.log("this.scrollTop", this.scrollTop) next() }, // 组件激活时触发 activated() { // 还原滚动条位置 console.log("1212-activated") document.getElementsByClassName("itemBoxs")[0].scrollTop = this.scrollTop || 0; //组件写法 document.getElementById('app').scrollTop = this.scrollTop || 0; //全局写法 },

以上就实现了返回页面后滚动条记忆的功能啦!

vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)(vue 跳转页面)

如果想实现分情况决定是否记忆滚动条以及刷新组件数据,请继续往下看:

在上述keep-alive的基础上1.定义全局变量(不要在data中定义!!!)

var isRefresh = false; //定义是否需要刷新

注: 之所以在定义全局变量isRefresh而不在data里定义是因为当生命周期进入beforeRouteEnter的时候，此时当前页面还没有被mounted，因此我们是获取不到当前实例this的指向的，变量值也取不到。

2.定义beforeRouteEnter //路由进入前判断是否重新加载还是缓存 beforeRouteEnter(to, from, next){ if(from.name == 'textbookModeSelection'){ //哪个页面进入需要刷新 isRefresh = true; //需要刷新 }else{ isRefresh = false; } next() },3.定义activated// 组件激活时触发 activated() { if(isRefresh) { //刷新 this.chooseCourseIndex = null; //清空需要的数据 document.getElementsByClassName("itemBoxs")[0].scrollTop = 0; //置顶滚动条 this.init(); //调用获取数据方法 }else{ //不刷新还原滚动条位置 document.getElementsByClassName("itemBoxs")[0].scrollTop = this.scrollTop || 0; }

注: keep-alive之后不会执行created,mounted钩子了，在activated中判断需要刷新之后，将列表数据初始化，发起请求即可，不刷新时则返回到列表记录的滚动条的位置

4.定义beforeRouteLeave//路由离开前执行beforeRouteLeave(to, from, next) { // 记录滚动条位置 this.scrollTop = document.documentElement.getElementsByClassName("itemBoxs")[0].scrollTop || 0; next() },

完成!

本文链接地址:https://www.jiuchutong.com/zhishi/297302.html 转载请保留说明！

上一篇：HTML唱吧导航栏(唱吧地图)

下一篇：如何使用ssh密钥的方式实现无密码scp传输文件(ssh怎么带密码)