搜索页面返回列表页不刷新

缓存界面

1.在router内，要缓存的页面设置keepAlive如果为true
keepAlive如果为true，就会使用keep-alive缓存起来，否则就不会被缓存

{
  path: '/taskList',
  name: 'SaskList',
  meta:{
    keepAlive: true
  },
  component: ()=>import('@/xx/xx')
}

2.在app.vue里面

<template>
    <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        
        <router-view v-if="!$route.meta.keepAlive" />
    </div>
</template>

3.在layout页面设置导航首位

beforeRouteleave(to,from,next) {
	if(to.path==='搜索'&&from.path==='列表页' ){
		// 搜索 到 我的待办 不刷新
		this.$set(this.$route.meta,'keepAlive',true)
 	}
 	if(to.path==='首页'&&from.path==='列表页' ){
 		// 首页到 我的待办 刷新
		this.$set(this.$route.meta,'keepAlive',false)
 	}
}

具体更多的功能：还原滚动条的滑动距离
参考：https://www.cnblogs.com/HJ412/p/12383617.html

还原滚动条的滑动距离

绑定onscroll 事件
在生命周期 mounted 为DOM元素绑定 onscroll 事件，实时 保存 滑动的距离

mounted(){
    // 为了使this指向组件实例， 需要使用箭头函数
    this.$refs.searchList.addEventListener('scroll', () =>{
        // 实时 滑动的距离 会保存在 vuex中，也可以保存在 session storage中
        this.$store.commit('setState', {searchTop: this.$refs.searchList.scrollTop})
    })
}

还原滑动距离
使用 组件的 路由守卫钩子 beforeRouteEnter，当详情页 进入搜索页，取出滑动的 距离 scrollTop 并赋值，否则设置 滚动条的 距离为 0，因为 beforeRouteEnter 钩子函数 访问不了this，因此需要 通过 next的回调函数 访问 this(vm)。

beforeRouteEnter (to, from, next) {
    next(vm =>{
        // 详情页进入搜索页 初始化滚动条
        if(from.name === 'Detail'){
            vm.$refs.searchList.scrollTop = vm.$store.state.searchTop
        }else{
            // 非详情页进入搜索页 设置滚动条为初始值 0
            vm.$store.commit('setState', {searchTop: 0})
        }
    })
}