vue路由实现前进刷新后退不刷新功能

需求

有A->B->C三个页面，要实现A页面进入B页面，B页面重新获取数据。从C页面返回到B页面，B页面有缓存，不用重新获取数据。

实现方法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>的include属性对应匹配的组件将会被缓存。在vuex声明一个数组变量作为include属性的值。在B页面上使用beforeRouteEnter内给变量数组添加B页面组件名添加缓存，beforeRouteLeave如果不是跳转到C页面，就删除变量数组中B页面的组件，删除缓存。

1.在vuex声明一个数组变量keepAlive，存放需要缓存路由组件name

vuex的index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
   
  state: {
   
    keepAlive: [] //需要缓存(keep-alive)的路由组件name
  },
  mutations: {
   
	 //添加缓存组件
    keepAliveAdd(state, data) {
   
      let keepAliveArr = state.keepAlive;
      let key = true;
      for (let index = 0; index