vue中进入详情页记住滚动位置的方法(keep-alive)

更新时间：2018年09月21日 11:12:04 作者：彻夜不归

今天小编就为大家分享一篇vue中进入详情页记住滚动位置的方法(keep-alive)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

> 有时业务提出这样一个需求就是从商品页面进入到列表详情页要保存当前滚动的位置，这里我就想到了keep-alive

1.首先在路由中引入需要的模块

{ 
path: ‘/scrollDemo', 
name: ‘scrollDemo', 
meta: { 
keepAlive: true // 需要缓存 
}, 
component: resolve => { require([‘../view/scrollDemo.vue'], resolve) } 
}

2.在App.vue中设置缓存组件

  <keep-alive>  // 缓存组件跳转的页面
    <router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
  </keep-alive> 

 // 非缓存组件跳转页面
 <router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>

3.在页面注册对应的事件

1. 在return中定义一个初始值 scroll

2. 在mouted中，mouted中的方法代表dom已经加载完毕

window.addEventListener('scroll', this.handleScroll);

3.methods 用于存放页面函数

   handleScroll () {
    this.scroll = document.documentElement && document.documentElement.scrollTop

    console.log(this.scroll)
   }

4. activated 为keep-alive加载时调用

   activated() {
     if(this.scroll > 0){
      window.scrollTo(0, this.scroll);
      this.scroll = 0;
      window.addEventListener('scroll', this.handleScroll);
     }
  }

5.deactivated 页面退出时关闭事件防止其他页面出现问题

  deactivated(){
   window.removeEventListener('scroll', this.handleScroll);
  }

以上这篇vue中进入详情页记住滚动位置的方法(keep-alive)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2安装tailwindcss的详细步骤
这篇文章主要介绍了vue2安装tailwindcss，本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
vue改变数据后数据变化页面不刷新的解决方法
这篇文章主要给大家介绍了关于vue改变数据后数据变化页面不刷新的解决方法,vue比较常见的坑就是数据(后台返回)更新了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
vue.js 获取select中的value实例
下面小编就为大家分享一篇vue.js 获取select中的value实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue父组件调用子组件方法报错问题及解决
这篇文章主要介绍了vue父组件调用子组件方法报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
使用vue-cli+webpack搭建vue开发环境的方法
这篇文章主要介绍了使用vue-cli+webpack搭建vue开发环境的方法,需要的朋友可以参考下
2017-12-12
使用vue3+TS实现简易组件库的全过程
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了如何使用vue3+TS实现简易组件库的相关资料,需要的朋友可以参考下
2022-03-03
vue过滤器filter的使用方法详解
这篇文章主要给大家介绍了关于vue过滤器filter的使用方法,Vue.js的过滤器(Filter)是一种可重用的功能,用于对文本进行格式化,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
vue3 el-pagination 将组件中英文‘goto’ 修改为&nbs
这篇文章主要介绍了vue3 el-pagination 将组件中英文‘goto’ 修改为中文到‘第几’,通过实例代码介绍了vue3项目之Pagination 组件,感兴趣的朋友跟随小编一起看看吧
2024-02-02
详细讲解如何创建, 发布自己的 Vue UI 组件库
当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗?我们为什么不发布一个 UI 组件库给自己用呢?下面小编和大家来一起学习下吧
2019-05-05
vue使用Pinia的五个实用技巧分享
这篇文章主要为大家详细介绍了vue中使用Pinia是五个实用技巧,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
2023-11-11