Vue项目设置路由缓存白名单，配合meta

路由配置
router—>index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route levell 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/AboutView.vue'),

    // children:[{
    //...
    // }]
  },
  {
    path: '/qrcode',
    name: 'qrcode',
    component: () => import( /* webpackChunkName: "qrcode" */ '../views/QrcodePage.vue')
  },
  {
    path: '/rout',
    name: 'rout',
    component: () => import( /* webpackChunkName: "rout" */ '../views/Rout.vue')

  },
  {
    path: '/login',
    name: 'login',
    component: () => import( /* webpackChunkName: "login" */ '../views/Login.vue'),
    meta: {
      requiresAuth: false,
      level: 1,
      deepth: 1,
      keepAlive: false,

    }
  },
  {
    path: '/shopping',
    name: 'shopping',
    component: () => import( /* webpackChunkName: "shopping" */ '../views/Shopping.vue'),
    meta: {
      level: 1,
      deepth: 1,
      keepAlive: true
    },
  },

  {
    path: '/shopDetail',
    name: 'shopDetail',
    component: () => import( /* webpackChunkName: "shopDetail" */ '../views/ShopDetail.vue'),
    meta: {
      level: 1,
      deepth: 0.8,
      keepAlive: true
    },
  }


]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Vuex配置
store ---->index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cachedComponents: ['home'], //缓存的组件
  },
  getters: {
    // 传入componentName 判断是否在cachedComponents缓存数组中
    isCachedComponent: (state) => (componentName) => {
      return state.cachedComponents.includes(componentName)
    }
  },
  mutations: {
    pushComToCache(state, componentName) {
      console.log('已缓存当前组件');
      state.cachedComponents.push(componentName)

    },
    deleteComFromCache(state, componentName) {
      console.log('清除上一个缓存组件');
     const index = state.cachedComponents.indexOf(componentName)
     index !== -1 &&  state.cachedComponents.splice(index, 1)
  

    },
  },
  actions: {},
  modules: {}
})

在App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <keep-alive :include="cachedComponents">
      <!-- 显示需要缓存的组件 -->
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 显示不需要缓存的组件 -->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      include: ["home"],
    };
  },
  computed: {
    ...mapState(["cachedComponents"]),
    ...mapGetters(["isCachedComponent"]),
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      console.log("to.path", to);
      console.log("from.path", from);

      // 需要缓存的页面不在缓存数组中,添加白名单，进行缓存
      if (
        to.meta.level === 1 &&
        to.meta.keepAlive &&
        !this.isCachedComponent(to.name)
      ) {
        this.$store.commit("pushComToCache", to.name);
      }
  //根据路由meta信息,清除缓存
      if (
        from.meta.level === 1 &&
        from.meta.keepAlive &&
        to.meta.deepth < from.meta.deepth
      ) {
        this.$store.commit("deleteComFromCache", from.name);
      }
    },
  },
};
</script>

完成！打开谷歌浏览器使用调试工具查看