jeecg boot 路由缓存失效问题

首页非缓存页面，其他页面是缓存页面，在切换到首页后，再次进入缓存页面缓存失效的解决方案

上篇文章中提到jeecg 缓存路由失效的第一种问题的解决方法

https://blog.csdn.net/a_biggerfish/article/details/156652230?spm=1001.2014.3001.5502https://blog.csdn.net/a_biggerfish/article/details/156652230?spm=1001.2014.3001.5502
承接上面的问题，我研究jeecg 封装的TableLayout.vue之后找到了首页非缓存页面，其他页面是缓存页面，在切换到首页后，再次进入缓存页面缓存失效的解决方案。

1.简单说一下我解决问题的新路历程

https://cn.vuejs.org/guide/built-ins/keep-alive

首先我研究routeView.vue页面的keep-alive找vue相关文献监听keep-alive的生命周期,发现每次切换页面的时候activated和deactivated生命周期都会触发，但是只有首页切换有问题很显然不是v-if导致的缓存失效

复制代码

<template>
  <div class="main">
    <keep-alive :include="includedComponents">
      <router-view v-if="keepAlive" />
    </keep-alive>
    <router-view v-if="!keepAlive" />
  </div>
</template>

然后我研究菜单页面里面的页面组件，找到对应的组件代码，首先Analysis.vue里面没有操作相关缓存路由的地方，如是找到TableLayout.vue找到了问题的所在

出现问题的代码如下在watch监听路由的时候，如果是首页没有缓存就刷新了：

javascript 复制代码

'$route': function(newRoute) {
        //console.log("新的路由",newRoute)
        this.activePage = newRoute.fullPath
        if (!this.multipage) {
          this.linkList = [newRoute.fullPath]
          this.pageList = [Object.assign({},newRoute)]
        // update-begin-author:taoyan date:20200211 for: TASK #3368 【路由缓存】首页的缓存设置有问题，需要根据后台的路由配置来实现是否缓存
        } else if(indexKey==newRoute.fullPath) {
          //首页时 判断是否缓存 没有缓存 刷新之
          if (newRoute.meta.keepAlive === false) {
            this.routeReload()
          }

刷新流程如下，现将其改为单页面模式，单页面模式就是没有缓存页面的，然后再修改回多页面模式

javascript 复制代码

routeReload(){
        this.reloadFlag = false
        let ToggleMultipage = "ToggleMultipage"
        this.$store.dispatch(ToggleMultipage,false)
        this.$nextTick(()=>{
          this.$store.dispatch(ToggleMultipage,true)
          this.reloadFlag = true
        })
      },

既然找到了问题的关键，解决问题的方法也就浮出水面

1.将首页修改为缓存页面

ps:博主我这个项目的首页需要的是非缓存页面所以研究了一下第二种方法

2.使用bus事件通知首页刷新，将强制非缓存，修改为事件非缓存，因为强制非缓存会影响其他缓存页面代码如下：

javascript 复制代码

'$route': function(newRoute) {
        //console.log("新的路由",newRoute)
        this.activePage = newRoute.fullPath
        if (!this.multipage) {
          this.linkList = [newRoute.fullPath]
          this.pageList = [Object.assign({},newRoute)]
        // update-begin-author:taoyan date:20200211 for: TASK #3368 【路由缓存】首页的缓存设置有问题，需要根据后台的路由配置来实现是否缓存
        } else if(indexKey==newRoute.fullPath) {
          //首页时 判断是否缓存 没有缓存 刷新之
          if (newRoute.meta.keepAlive === false) {
            // this.routeReload()
            // 发送刷新事件给首页通知刷新
            this.$bus.$emit('page-method-call', {
              methodName: 'reload'
            })
          }

接收事件的代码如下（注意事件监听在页面销毁的时候要关闭）：

javascript 复制代码

mounted() {
      // 监听刷新事件
      this.$bus.$on('page-method-call', (data)=>{
        if(data.methodName === 'reload'){
          this.refresh()
        }
      })
    },
    beforeDestroy() {
      // 移除事件监听器
      this.$bus.$off('page-method-call', this.refresh)
    },

如果还有什么其他方法欢迎评论区流言讨论