vue-router 中 keep-alive 与 scrollBehavior

一. 路由文件配置

当创建一个 Router 实例，提供一个 scrollBehavior 方法：

// 要保存位置的页面添加 meta.top 并开启 keep-alive
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    meta: {
      isKeep: true,
      top: 0
    },
    component: () => import('@/views/Home/Home.vue')
  }
]

//在 new VueRouter 的里添加 scrollBehavior 滚动行为
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 详细看文档
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: to.meta.top || 0 }
    }
  }
})

二. App.vue

开启 keep-alive 缓存

// 开始keep-alive (这里只添加了 Home 文件 )
<keep-alive include="Home">
     <router-view></router-view>
</keep-alive>

三. 运用的文件写法

在Home.vue文件 利用监听来存储页面滚动

<script>
import _ from 'lodash'
let fn = null

export default {
  name: 'Home',
  data () {
    return {}
  },
  // 如果不需要判断清除 keep-alive 去掉
  beforeRouteEnter (to, from, next) {
  	// 让每次都开启 keep-alive
    to.meta.isKeep = true
    if (from.name === '不想缓存的文件name') {
      console.log('跟新数据')
    }
    next()
  },
  activated () {
    fn = this.recordTopHandler()
    window.addEventListener('scroll', fn)
  },
  deactivated () {
    window.removeEventListener('scroll', fn)
  },
  methods: {
    recordTopHandler () {
    // _.debounce 运用 lodash 插件里的防抖
      return _.debounce(
        () => {
          this.$route.meta.top = window.scrollY
        },
        50,
        { trailing: true }
      )
    }
  }
}
</script>

四. App.vue

开启 keep-alive 缓存

// 开始keep-alive (这里只添加了 Home 文件 )
<keep-alive include="Home">
     <router-view></router-view>
</keep-alive>

五. 不缓存文件

User页面跳转Home页面缓存 Info跳转Home不缓存

<template>
  <h1>Info</h1>
</template>

<script>
export default {
  name: 'Info',
  beforeRouteLeave (to, from, next) {
    // 设置下一个路由的 meta
    if (to.name === 'Home') {
      to.meta.isKeep = false
      to.meta.top = 0
    }
    next()
  }
}
</script>

可以参考文档 vue-router文档,可修改为异步滚动与平滑滚动