在实际开发中.会有这样的需求，从列表点击到详情，缓存数据。详情返回列表则保持滚动条位置，并且不再请求列表api！网上的资料很多都是水的，正常情况下 直接 加上<keep-alive> 即可，但是如果列表本身是带有参数的，那就不行了。一下为参数变化的实现方式！

demo请狠狠的戳这里 https://download.lllomh.com/cliect/#/product/FA28111110405059

   一：一样的是 在 路由表设置好标记

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{ keepAlive: true},
  },
  {
    path: '/detail',
    name: 'Detail',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Detail.vue')
  }
]

然后在 APP.vue 添加if

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

这里 key 要是每个页面的全程url.这里非常重要,不然会导致失效

二.在home.vue 中

  activated(){
    console.log(12121212)
    console.log(this.formNav)
    this.items=this.items.splice('')
    this.cacheData_scrollTop = window.sessionStorage.getItem(this.key) ? window.sessionStorage.getItem(this.key) : null

    if(this.formNav){
      window.scrollTo(0,0);
    }else {
      window.scrollTo(0,this.cacheData_scrollTop);
    }
    console.log( this.cacheData_scrollTop)
  },
  deactivated () {
    this.formNav=false
    window.sessionStorage.setItem(this.key, this.scrollTop)
  },

这里因为要区别 从左边导航栏点击的时候要返回顶部,从详情页返回则不需要返回顶部,加个 nav参数来判断

  watch: {
    '$route' (to, from){
      console.log(to.path)
      console.log(from.path)
      if(from.path=='/' || to.path=='/'){
        if(this.$route.query.form=='nav'){
          this.formNav=true
        }else {
          this.formNav=false
        }
      }
    }
  },

三.获取滚动条

    needScroll(){
      console.log(2222)
      window.addEventListener('scroll', () => {

        let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
        this.scrollTop=top
      })
    },

就可以实现缓存 加返回滚动位置了

第一次会请求,二次就直接取缓存数据了