vue 页面返回记住滚动条上次浏览位置(keep-alive)

vue 页面返回 记住滚动条上次浏览位置(keep-alive)

实现这样的功能，现在变得非常方便了，不知道的小伙伴们，让我们一起来看看吧。

为了实现这一功能我们得运动到vue组件当中的（keep-alive）。keep-alive是vue的内置组件，能在组件切换

过程中将状态保留在内存中，防止重复渲染DOM。（优点：避免重复往后台发送请求）

接下来让我们一起来看看实际操作吧

首先，我们需要在配置路由界面里面做这样的操作

	{
     	 path: '/index',
     	 name: 'index',
     	 component: index,
     	 meta: {
       		 keepalive: true // 组件是否需要被保存
     	 }
    }

然后我们在App.vue页面当中，将需要保存的组件通过路由标签router-view，写在keep-alive标签里（别忘记区分keepalive大小写哦）

	<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>

下面我们需要在页面注册对应的事件

<script>
export default { //这里需要将模块引出，可在其他地方使用
    name: "****",//模块名称
    data (){ //注意：data即使不需要传数据，也必须return,否则会报错
      return {
        scroll:0//第一步：定义初始滚动高度
      }
    },
  	//第二步：mounted中的方法代表dom已经加载完毕
	mounted:function(){
		window.addEventListener('scroll', this.handleScroll);
	},
	//created在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
	created(){
		
	},
	//第三步：用于存放页面函数
	methods:{
		handleScroll () {
	       this.scroll  = $(window).height()+ $(document).scrollTop()
	   	}
	},
	//第四步：当再次进入（前进或者后退）时，只触发activated（注：只有在keep-alive加载时调用）
	activated(){
	    if(this.scroll > 0){
	        window.scrollTo(0, this.scroll);
	        window.addEventListener('scroll', this.handleScroll);
	    }
   	},
   	//第五步：deactivated 页面退出时关闭事件 防止其他页面出现问题
  	deactivated(){
		window.removeEventListener('scroll', this.handleScroll);
	},
  }
</script>

感谢阅读

如有问题，欢迎留言指出，一起学习，一起进步