动态缓存组件，以及在指定条件下刷新，及include和exclude无效问题，踩坑（keep-alive）（vue）

// name的正确位置
export default {
 name:'a', // include 或 exclude所使用的name
 data () {
 return{
    }
  },
}

// 在App.vue中加入：这里是所有页面切换到地方，下面代码分别对不同的设置，采用不同的渲染方式。
<template>
  <div id="app">

    <keep-alive include="CustomerList"> // include="CustomerList" 表示缓存的组件名
      <router-view ></router-view>
    </keep-alive>

  </div>
</template>

// 或者在对应路由使用keepAlive: true 开启组件缓存
{
    path: '/customer-list',
    component: () => import('@/views/sidebar/customerList'),
    name: '客户列表',
    meta: {
      title: '客户列表',
      keepAlive: true
    }
  },
  
// 以上可实现组件缓存。

// app.vue缓存组件时，可以增加一个字段，用作对该keep-alive的显隐
<keep-alive v-if="isKeepAlive" :include="CustomerList">  // isKeepAlive是控制字段
   <router-view />
</keep-alive>

// 在methods里写一个刷新方法
  methods: {
    // 缓存刷新
    reload() {
      console.log('调用了清除keep-alive缓存事件')
      this.isKeepAlive = false
      this.$nextTick(() => {
        this.isKeepAlive = true
      })
    }
  }

// 在app.vue页面注入这个方法
provide() {
  return {
    reload: this.reload // 其他页面调用此方法可清除keep-alive缓存
  }
},


// 注入了这个方法后，其他页面注册后就可以直接调用此方法来达到刷新缓存的作用了
inject: ['reload'], // 其他页面注册
this.reload() // 在其他页面需要的地方直接调用即可