前言：對于前端，都會遇到這么一個場景。例如列表頁面，點擊相應列表，進入詳情頁面，在詳情頁返回到列表頁面時，需要返回到用戶點擊的那個列表，頁面不刷新。
關(guān)于這個實現(xiàn)，這里需要滿足以下兩點：
1.必須是個單頁面
2.必須使用了vue-router路由。
如果不滿足以上條件，例如不是單頁面應用，是個多頁面應用，這時候是不適合以下的實現(xiàn)方法的。

解決思路：

1.返回列表頁不刷新，即不請求數(shù)據(jù)
2.記錄用戶點擊后列表頁的滾動距離，即scrollTop值。返回后滾動到記錄的scrollTop值

實現(xiàn)原理：

1.利用vue的組件級緩存標簽<keep-alive></keep-alive>，該標簽可以使其包裹在內(nèi)部的組件在內(nèi)存中緩存，不被銷毀，這樣子就可以達到我們解決思路的第一條，頁面不刷新，不重新請求數(shù)據(jù)。
2.記錄滾動距離
3.在返回列表頁后用activated生命周期設置記錄的滾動距離

生命周期執(zhí)行順序：

1.不使用keep-alive的情況：beforeRouteEnter --> created --> mounted --> destroyed
2.使用keep-alive的情況：beforeRouteEnter --> created --> mounted --> activated --> deactivated
3.使用keep-alive，并且再次進入了緩存頁面的情況：beforeRouteEnter -->activated --> deactivated

具體實現(xiàn)

step1:

//在App.vue文件中用keep-alive標簽按條件緩存路由頁面
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

step2:

關(guān)鍵點：設置默認的meta.keepAlive為true,因為keepAlive是針對進入列表頁之前是否需要緩存本次進入的數(shù)據(jù)。true為緩存，false為不緩存

//在router/index.js文件設置step1啟用哪個router-view
export default new Router({
    routes: [
        {
            path:'/detail',//詳情頁面
            name:'Detail',
            component:Detail
        },{
            path:'/list',//列表頁面
            name:'List',
            component:List,
            meta:{
              keepAlive:true
            }
        }
    ]
})

step3:

//list.vue（列表頁面）文件，在路由離開前判斷如果進入詳情頁面，則緩存本頁數(shù)據(jù)，如果不是，則不緩存
beforeRouteLeave(to, from, next) {
    if (to.name == "Detail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
      }
    next();
  }

step4:

在離開list頁面前記錄頁面滾動距離，具體代碼視頁面HTML結(jié)構(gòu)決定。

step5:

在進入list頁面后，activated生命周期中設置滾動距離。具體代碼視頁面HTML結(jié)構(gòu)決定。

總結(jié)

這種方式僅適用于使用vue-router路由的項目。對于多頁面的解決方案，目前沒有想到好的解決方法。