VUE全家桶项目实战-- 5.标签页的组件缓存/删除缓存和退出登录

一.标签页的优化

​ 功能实现为:点击菜单,添加标签,同时缓存组件页面内容,点击不同的标签,组件会记录之前的内容,页面记录不会更改,删除标签,则不会缓存组件内容,下一次再点击菜单是,组件内容为NULL

1.vue 代码

<!-- 内容区域 -->
 <!--
	@tab-remove:标签删除
	@tab-click:标签点击-->
      <el-main>
        <div class="tabs">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
            
            @tab-click="skipTab"
          >
            <el-tab-pane
              v-for="(item) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
          <!-- include 只有名称匹配的组件会被缓存
				添加标签,组件缓存
				删除标签,删除组件缓存
				操作数组中的组件名称就可以了
				可以做到添加标签的时候缓存组件内容,删除标签,不缓存组件内容,再点击菜单,页面为空白
				-->
        <keep-alive :include="keepAlives">
          <router-view></router-view>
        </keep-alive>
      </el-main>

2.组件名称为各个组件的name对应的值

//该组件中名称为 user
export default {
   
  name:'user',
  data() {
   }
}

3.添加删除标签的js 代码

//导航栏的菜单添加标签
<el-menu-item index="/charge" @click="addTab('充电','charge')">充电</el-menu-item>

export default {
   
  data() {
   
    return {
   
      editableTabsValue: "",
        //需要缓存组件的数组,包含的是字符串
      keepAlives: ["welcome"],
      editableTabs: [
        {
   
          title: "首页",
          name: "welcome"
        }
      ],
    };
  },
  methods: {
   
      //添加标签
    addTab(title, name) {
   
       
      const length = this.editableTabs.length;
        //如果标签数组为0,直接添加标签数组
      if (length == 0) {