咱們在實(shí)際開發(fā)中會(huì)遇到一個(gè)問題：
我們在一個(gè)很長的列表頁往下拉，然后點(diǎn)擊列表中的某一個(gè)數(shù)據(jù)進(jìn)入到詳情頁查看。此時(shí)我們決定返回列表也繼續(xù)查看列表。
很多情況下，由于列表頁的組件已經(jīng)被銷毀，所以我們返回到列表頁后頁面會(huì)置頂，不得不又重新下拉查看列表，這樣就做了很多沒有必要的操作，也是不符合用戶的預(yù)期。

用戶希望當(dāng)我查看玩詳情頁以后返回，返回列表頁的位置是剛剛瀏覽的位置

這種情況有什么好的解決辦法呢？
這里帶來了3種解決方案：

1.使用<keep-alive> 緩存，即不銷毀列表頁

APP.js中

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

router.js中

 routes: [
    {
      path: '/',
      name: 'List',
      //component: List
      component: () => import('./views/index/list.vue'),
      meta: {
        keepAlive: true // 需要緩存
      }
    },
    {
      path: '/content/:contentId',
      name: 'content',
      component: () => import('./views/index/content.vue'),
      meta: {
        keepAlive: false // 不需要緩存
      }
    },
]

詳情頁面不需要緩存，列表頁面需要緩存

2.使用路由守衛(wèi)

原理就是在beforRouterLeave的路由鉤子記錄當(dāng)前頁面滾動(dòng)位置

//在頁面離開時(shí)記錄滾動(dòng)位置,這里的this.scrollTop可以保存在vuex的state或者瀏覽器本地
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },

//進(jìn)入該頁面時(shí)，用之前保存的滾動(dòng)位置賦值
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

這里的this.scrollTop可以保存在vuex的state或者瀏覽器本地

3.使用vue-router方法scrollBehavior（推薦）

router.js中

const scrollBehavior = function scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  }else {
      return { x: 0, y: 0 }
   }
};
const router = new Router({
  routes,
  scrollBehavior,
});

該方案直接在路由進(jìn)行處理，兼容每個(gè)頁面并且頁面加載完后并也不會(huì)產(chǎn)生1px的滾動(dòng)位置。