vue keep-alive搭配component做带移除选项卡功能的管理页面，如何动态清除指定的组件缓存？

  • Z时代
  • 2024-03-13
  • 分类：IT

使用keep-alive搭配component:is，以及左侧菜单和选项卡组件，组成一个管理页面，现在要给选项卡加移除按钮。

移除选项卡时，要把keep-alive缓存的对应组件给清掉。

每个被添加的组件，要么基于路径动态导入的组件（()=>import()），要么是通过import from的形式导入的（这种会使用多个实例）。

流程基本是：先调用Vue.component(page_id,mycomponent)注册导入的组件，将page_id变量的内容作为注册的组件名字，然后把page_id赋值给component的is绑定的属性。再把page_id赋值给选项卡组件的v-model绑定的属性

要根据page_id清除指定组件的缓存，清除组件缓存之后，还得根据page_id清除对应的选项卡，以及其他的操作

问题：根据page_id清除指定注册的组件的缓存，请问怎么做？比如需要调用vue自带什么方法？。

代码：
html代码：

 <div class="tabs">
        <div class="tabHeader">
         <div>
          <el-tabs v-model="activeName" @tab-click="tabHeaderClick" @tab-remove="removeTab" >
            <el-tab-pane  v-for="(item) in tab_list" :label="item.label" :name="item.page_id" closable  >
            </el-tab-pane>
          </el-tabs>
         </div>
        </div>
        <div class="tabContent">
          <keep-alive>
            <component :is="viewName" :key="viewName" :message="page_message" ></component>
          </keep-alive>
        </div>
      </div>

相关vue代码

data() {
    return {
    //动态组件所在文件夹路径
      pagePathBase:"../testComponent",
      //选项卡绑定属性
      activeName: undefined,
      //component标签绑定内容
      viewName:undefined,
      选项卡列表
      tab_list:[
      ],
      //子组件参数
      page_message:undefined,
       菜单列表
      menuItems:[
        {menu_type:1,label:"菜单1",page_id:"a1",view_type:1,view_path:"/test1.vue"},
        {menu_type:2,label:"菜单2",page_id:"a2",children:[
          {menu_type:1,label:"子菜单1",page_id:"a3",view_type:2},
          {menu_type:1,label:"子菜单2",page_id:"a4",view_type:1,view_path:"/test2.vue"},
        ]},
        {menu_type:1,label:"菜单3",page_id:"a5",view_type:2},
      ],
    };
  },
  methods: {
    removeTab(val){
      var index = this.tab_list.findIndex((item) => item.page_id === val);
      if(index==-1){
        return;
      }
      this.tab_list.splice(index, 1);
      if(val== this.activeName){
        this.activeName=undefined;
        this.viewName=undefined;
      }
    },
    tabHeaderClick(val){
      this.viewName=val.name;
    },
    //菜单点击
    MenuClick(item){
      var tabItem = this.tab_list.find((tabItem) => tabItem.page_id === item.page_id);
      if(tabItem!=undefined){
        this.activeName=tabItem.page_id;
        this.viewName=tabItem.page_id;
        return;
      }
      if(item.view_type==1){
    //动态导入的组件
          var loadComponent = () =>  import(this.pagePathBase+item.view_path); 
        Vue.component(item.page_id, loadComponent);
      }else if(item.view_type==2){
    //静态导入的组件
          Vue.component(item.page_id, Test3);
          this.page_message = item.page_id);;
      }
      var obj={page_id:item.page_id);,label:item.label};
      this.tab_list.push(obj);
      this.activeName=obj.page_id;
      this.viewName=obj.page_id;
    },
  },

回答：

Vue.component(item.page_id, loadComponent);

注册组件的时候，已经用item.page_id做为名称了。这里直接用keep-alive组件的include属性就行了。组件data里添加一个page_id_list存放显示的page_id数组即可

 <keep-alive :include="page_id_list">
...
</keep-alive>

回答：

Vue并有似乎并提供任何关于清除keep-alive缓存的办法，
你是碰到什么问题了，为什么必须要清除缓存，不清除这些会造成什么样的后果，

以上是 vue keep-alive搭配component做带移除选项卡功能的管理页面，如何动态清除指定的组件缓存？ 的全部内容， 来源链接： utcz.com/p/933612.html

回到顶部