vue页面详情页返回列表页_vue列表页进入详情页，返回列表项不刷新

功能

像搜索功能，在点击某项进入详情页，再回到搜索界面，如果不做特殊处理，初始化到原来的状态，在vue中可以使用keep-alive缓存搜索界面，达到数据不刷新的结果。

思路

在搜索路由对象的meta添加一个keepAlive属性，值为true，表示在路由切换的时候，会被缓存。这样一来搜索界面的数据不会被初始化。

缓存界面

keepAlive如果为true，就会使用keep-alive缓存起来，否则就不会被缓存

router

{

path: '/search',

name: 'Search',

meta:{

keepAlive: true

},

component: Search

}

App.js

初始化数据

但是有时候只需要 搜索界面 进入 详情页 才需要缓存，当搜索界面进入 非详情页 时，再回到 搜索界面，希望 清除界面的 数据，可通过 vm.$data 初始化 data 数据，但此时 不能直接 赋值，vue的 data 是一个函数，因此可以 通过调用 vm.$options.data() 返回一份 原始的 data，再使用 Object.assign() 合并 vm.$data、原始data。

// 当前往首页时，初始化 data

backHome(){

// 初始化数据

Object.assign(this.$data, this.$options.data())

this.$router.replace('/home')

}

效果一

此时可以实现 进入详情页，返回搜索界面 数据不刷新，进入首页，返回 搜索界面 数据初始化 的效果，但 搜索界面 滚动条的 滑动距离 会置为0，因此 不是我 们想要的。

还原滚动条的滑动距离

绑定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})

}

})

}

效果二