解决 blandx 框架 saber3 菜单缓存配置无效 及 同一路由不同参数页面区分问题

引言

最近使用blandx的saber3框架进行开发时，发现两个框架问题：
1、菜单页面配置的菜单缓存功能未生效，问题反馈到社区，作者回复框架确实存在此问题，只是记录此问题并未给出修改方式，只能自己研究框架菜单缓存逻辑进行解决。
2、同一路由页面不同参数，打开的页面数据都会变成最后一次打开的参数数据，例如：先点击张三的信息，新开一个tab显示的张三的信息，然后在点击李四的信息，新开一个tab显示李四的信息，这时候返回张三的tab，显示的信息变成李四的信息了。

1、菜单缓存

1.1 修改主视图层router-view的代码(文件路径：src>page>index>index.vue)

//原始代码
<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
      <div class="avue-sidebar" v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo />
        <sidebar />
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
        <top ref="top" />
        <!-- 顶部标签卡 -->
        <tags />
        <search class="avue-view" v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div id="avue-view" v-show="!isSearch" v-if="isRefresh">
          <router-view #="{ Component }">
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </div>
    </div>
    <!-- <wechat></wechat> -->
  </div>
</template>

修改点：

1. 图上router-view标签上的#="{ Component }“写法在编辑器识别为错误的写法，需要改为v-slot=”{ Component }"的写法。
2. component标签包含到keepAlive标签里面，需要配置一个相同的component标签到keepAlive标签同级，并通过是否缓存字段进行判断是否显示。

//修改完成后
<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
      <div class="avue-sidebar" v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo />
        <sidebar />
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
        <top ref="top" />
        <!-- 顶部标签卡 -->
        <tags />
        <search class="avue-view" v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div id="avue-view" v-show="!isSearch" v-if="isRefresh">
          <router-view v-slot="{ Component }" >
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" v-if="$route.meta.keepAlive"/>
            </keep-alive>
            <component :is="Component" v-if="!$route.meta.keepAlive"/>
          </router-view>
        </div>
      </div>
    </div>
    <!-- <wechat></wechat> -->
  </div>
</template>

2、非菜单页面缓存

1、需要在router文件里面添加路由信息，文件路径：src>router>views>index.js
2、添加meta属性并在meta属性里面添加缓存标识

{
    path: '/regularCustomerManagement',
    component: Layout,
    redirect: '/regularCustomerManagement/customerDetails',
    meta: {
      keepAlive:true,
    },
    children: [
      {
        path: 'customerDetails',
        name: '客户信息',
        meta: {
          i18n: 'customerDetails',
          keepAlive:true,
        },
        component: () => import(/* webpackChunkName: "views" */ '@/views/regularCustomerManagement/customerDetails.vue'),
      },
    ],
  },

3、在需要缓存的页面添加name(此name不是路由写的name)，而是keepAlive的include包含的值，通过查看打印include对应$store.getters.tagsKeep的值，发现saber3的include是页面路由地址，所以最简单的修改就是name配置为当前页面的路由地址。

name:"/regularCustomerManagement/customerDetails"

4、因为saber3的缓存是基于菜单的二级缓存，配置非菜单缓存时因为可能会存在路由地址带参数的情况，造成include绑定的值和页面name对应不一致造成缓存失效，所以还需要修改路由地址取值为不带参数的值。文件地址：src>store>getters.js

//原来的代码
tagsKeep: (state, getters) => {
   return getters.tagList
     .filter(ele => {
       return (ele.meta || {}).keepAlive;
     })
     .map(ele => ele.fullPath);
 },
 //修改后的代码
 tagsKeep: (state, getters) => {
    return getters.tagList
      .filter(ele => {
        return (ele.meta || {}).keepAlive;
      })
      .map(ele => ele.path);
  },

3、同一页面不同参数区分

1、页面地址同第一点一致，即：src>page>index>index.vue
2、通过添加key进行区分，key只能加到component标签上，不然会影响菜单缓存的功能。

<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
      <div class="avue-sidebar" v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo />
        <sidebar />
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
        <top ref="top" />
        <!-- 顶部标签卡 -->
        <tags />
        <search class="avue-view" v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div id="avue-view" v-show="!isSearch" v-if="isRefresh">
          <router-view v-slot="{ Component }" >
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" :key="$route.fullPath" v-if="$route.meta.keepAlive"/>
            </keep-alive>
            <component :is="Component" :key="$route.fullPath" v-if="!$route.meta.keepAlive"/>
          </router-view>
        </div>
      </div>
    </div>
    <!-- <wechat></wechat> -->
  </div>
</template>