vue单页应用前进刷新后退不刷新如何实现（利用keep-alive）

 场景如下

下面的图片（图1）：后退时，不刷新的页面。（需要保证左侧列表中的active状态）

下面的图片（图2）：点击“返回”，返回到上图（图1）所示的页面，此时要保证（图1）的页面不刷新

那么如何实现 ？

step1

在不需要刷新的路由元信息meta中,增加keepAlive:true属性

step2

在App.vue模板中改写<router-view>，具体可以这样： 

<comment>
  # 组件注释
  项目入口
</comment>

<template>
  <div id="app">
    <!-- isRouterAlive全局刷新 -->
    <div v-if="isRouterAlive">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
          <!-- 这里是会被缓存的视图组件，比如列表A页面 -->
        </router-view>
      </keep-alive>

      <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件，比如详情B页面-->
      </router-view>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import config from "@/themeColor/defaultSettings";
import { updateTheme, colorList } from "@/themeColor/settingConfig";

export default {
  name: "App",
  components: {},
  props: {},
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      api: {
        getDictApi:
          Util.domainDict +
          Util.portDict +
          "/web/system/dictionary/findChildDictionary", // 获取系统字典
        getCitysApi:
          Util.domainDict + Util.portDict + "/web/system/dictionary/findAllArea" // 获取省市联动数据
      },
      baseConfig: Object.assign({}, config),
      isRouterAlive: true,
      citys: [],
      dicts: {
        GENDER_TYPE: [], // 性别
        COMPANY_NATURE: [], // 公司性质
        JOB_SEQUENCE: [], // 岗位序列
        TENANT_STATE: [], // 租户状态
        ORGANIZATION_TYPE: [], // 	组织类型
        DATA_PERMISSION_SCOPE: [], // 数据权限范围
        FILE_TYPE: [], // 档案类型
        ROLE_ATTRIBUTE: [], // 角色属性
        CATEGORICAL_ATTRIBUTE: [], // 分类属性
        APPLICATION_TYPE: [], // 应用类型
        DOCUMENT_TYPE: [], // 证件类型
        DEPARTMENT_TYPE: [] // 部门类型
      }
    };
  },
  computed: {
    ...mapState({
      primaryColor: state => state.color,
      loading_finish: state => state.loading_finish
    })
  },
  created() {
    // window.document.documentElement.setAttribute("data-theme", "theme");
    // this.getDictAll()
    // this.getCitys()
    // 当主题色不是默认色时，才进行主题编译
    if (this.primaryColor !== config.primaryColor) {
      this.isRouterAlive = true;
      updateTheme(this.primaryColor, () => {
        if (document.getElementById("loading-loader")) {
          // console.log('我加载完了')
          document.body.removeChild(document.getElementById("loading-loader"));
          this.getDictAll();
        }
      });
    }
  },
  mounted() {},
  watch: {},
  methods: {
    /*changeColor(color) {
          this.baseConfig.primaryColor = color
          if (this.primaryColor !== color) {
            this.$loading.show('loading')
            this.$store.commit('SET_LOADING_FINISH', false)
            this.$store.commit('SET_COLOR', color)
            updateTheme(color, () => {
              setTimeout(() => {this.$loading.hide('loading')},500)
              let mapFrame = document.getElementById('iframe')
              if(mapFrame){
                let iframeWin = mapFrame.contentWindow
                iframeWin.postMessage({
                  primaryColor: color
                },'*')
              }
            })
          }
        },*/
    // 全局刷新
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    getDictAll() {
      for (let key in this.dicts) {
        this.$get(this.api.getDictApi, { code: key })
          .then(response => {
            Util.processRes(response, () => {
              if (response.data) {
                this.dicts[key] = response.data;
                this.$store.commit("SET_DICTS", this.dicts);
              }
            });
          })
          .catch(res => {
            console.log(res);
          });
      }
    },
    getCitys() {
      this.$get(this.api.getCitysApi)
        .then(response => {
          Util.processRes(response, () => {
            response.data &&
              response.data.length &&
              this.$store.commit("SET_CITYS", response.data);
          });
          Util.processError(this, response);
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  destroyed() {}
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;*/
}
</style>

然后就完了

参考网址：vue单页应用前进刷新后退不刷新方案探讨