vue列表頁進入詳情頁，返回列表項不刷新

功能

• 像搜索功能，在點擊某項進入詳情頁，再回到搜索界面，如果不做特殊處理，初始化到原來的狀態，在vue中可以使用keep-alive緩存搜索界面，達到數據不刷新的結果。

思路

• 在搜索路由對象的meta添加一個keepAlive屬性，值為true，表示在路由切換的時候，會被緩存。這樣一來搜索界面的數據不會被初始化。

緩存界面

• keepAlive如果為true，就會使用keep-alive緩存起來，否則就不會被緩存

router

{
  path: '/search',
  name: 'Search',
  meta:{
    keepAlive: true
  },
  component: Search
}

App.js

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

初始化數據

• 但是有時候只需要 搜索界面 進入 詳情頁 才需要緩存，當搜索界面進入 非詳情頁 時，再回到 搜索界面，希望 清除界面的 數據，可通過 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})
        }
    })
}

效果二