vue使用keep-alive缓存页面回到滚动位置

业务场景：移动端一个列表页下拉到某个位置时，点击其中一条数据进入详情页，再从详情页返回列表页时，还是在原来的位置。

实现：

1、在App.vue中加上keep-alive缓存组件。

 <keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>   // 路由配置keepAlive属性为true时，需要缓存</keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view> // 路由配置keepAlive属性为false时，不需要缓存

2、在需要缓存的页面的路由配置中。

{path: '/testPath',name: 'testName',meta: {title: 'testTitle',tabbar: false,keepAlive: true    // 在需要用到缓存的页面的meta里设置keepAlive为true},component: () => import('@/views/components/testFile')
}

3、在需要缓存的页面文件中。

首先，配置了keep-alive的文件不会执行 created() 和 mounted()，而是执行 activated() 和 deactivated() 这两个生命周期钩子函数。

activated() 在页面进入时调用，deactivated() 在页面退出时调用。

beforeRouteEnter(to, from, next) {next((vm) => {vm.from = from// 我这里该页面处于二级页面，三级页面返回时需要缓存，一级页面进入时需要执行getList()方法获取数据// 注意：beforeRouteEnter不能通过this访问组件实例，要通过 vm 访问。因为当钩子执行前，组件实例还没被创建。// 执行顺序：beforeRouteEnter => created => mounted => beforeRouteEnter的next()if (from.meta.keepAlive !== false) {vm.list = []vm.temp = {pageNum: 1,pageSize: 10}vm.type = vm.$route.query.typevm.getList()window.addEventListener('scroll', vm.handleScroll, true)   // 监听滚动事件}})
},
created() { },
mounted() { },
activated() {if (this.scroll > 0) {var body = document.getElementsByClassName('container')[0]body.scrollTo(0, this.scroll)    // 滚动到缓存的scroll值的位置this.scroll = 0}window.addEventListener('scroll', this.handleScroll, true)
},
deactivated() {window.removeEventListener('scroll', this.handleScroll, true)  // 页面退出时关闭事件，防止其他页面出现问题
},
...
handleScroll() {// 记录滚动位置this.scroll = document.getElementsByClassName('container')[0].scrollTop;console.log('scrollTop', this.scroll)
}

vue使用keep-alive缓存页面回到滚动位置相关推荐

vue 页面A转到页面B,B页面停留在A页面的滚动位置
如果页面A沿Y轴滚动一段距离,然后跳转到页面B;在进入B页面时,B页面已经滚动到页面A的距离,返回页面A,发现A还在之前的滚动位置: 在路由守卫回调中,设置每次进入路由时,将window的scroll ...
Vue路由开启keep-alive缓存页面
mode:hash模式下: HTML部分: <template><div id="app"><keep-alive> <!--使用keep ...
vue中进入详情页记住列表滚动位置keep-alive解决
一.配置路由 keepactice:true {path: '/index',name: 'index',component: index,meta: {keepalive: true // 组件是否 ...
ASP.NET小技巧——回传后保持页面的滚动位置
今天在MSDN上看到一篇文章,关于如何在ASP.NET页面回传后保持当前的滚动(垂直)位置. 这个技巧挺实用的,在此做简单的翻译介绍. 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部. ...
vue缓存页面【二】
keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-ali ...
基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用, ...
vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive:t ...
vue中多个路由页面切换造成滚动互相影响问题的解决
一.问题描述在vue的项目开发中,出现了这样的问题.在进入一个路由页面的时候,进行了页面滚动,滚动的位置会被缓存.当离开页面以后,下次再进入一个页面的时候,切换新路由,发现默认进入的位置就是之前滚动 ...
Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...

vue使用keep-alive缓存页面回到滚动位置

实现：

vue使用keep-alive缓存页面回到滚动位置相关推荐

最新文章

热门文章

vue使用keep-alive缓存页面 回到滚动位置

实现：

vue使用keep-alive缓存页面 回到滚动位置相关推荐

最新文章

热门文章

vue使用keep-alive缓存页面回到滚动位置

vue使用keep-alive缓存页面回到滚动位置相关推荐