App.vue 中动态渲染页面是否启用keepAlive

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

在router.js 路由中，通过meta.keepAlive控制页面是否启用keepAlive

    {
      path: '/abc',
      name: 'abc',
      component: () =>
        import ('./views/abc'),
      meta: {
        title: '测试标题',
        keepAlive: true, // 是否启用keepAlive
      }
    },

对于启用了keepAlive的页面，页面数据是不刷新的，所以可以在此页面记录当前滚动条的距离，在返回此页面的时候设置滚动条距离

  this.scrollTop = document.getElementById('app').scrollTop // 记录当前滚动位置

  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
    document.getElementById('app').scrollTop = this.scrollTop // 设置滚动条位置
  },