vue2使用keep-alive缓存已打开过的菜单，使用el-tabs展示面包屑路由。

不灭777

已于 2022-05-10 10:21:28 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： ts 文章标签： vue.js 前端 javascript

于 2022-05-09 17:22:37 首次发布

本文链接：https://blog.csdn.net/Eleuuuuy/article/details/124670244

需求：

点击左侧菜单栏，面包屑实时更新，如果所点击菜单在面包屑中存在，需要缓存，不存在重新加载，面包屑tab切换需要缓存，关闭one-tab更新tabslist。
keepalive只支持二级路由，多级路由需要扁平化处理。

使用vuex，vue-class-component类组件封装，自行转换。

面包屑tabs组件

components/CommonTab.vue
<template>
    <div class="tabs" ref="tags">
        <el-tabs v-model="currentName" type="card" @edit="handleTabsEdit" @tab-click="handleTabClick">
            <el-tab-pane :key="tag.name" v-for="tag in tags" :closable="tag.name === ('首页' || '首頁') ? false : true" :label="tag.meta.title" :name="tag.meta.title"> </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import {
    Vue, Component, Mixins, Watch, Prop } from 'vue-property-decorator'; 

@Component
export default class CommonTab extends Vue {
   
    tags: any = [];
    editableTabsValue: any = '';
    currentName: any = '';
    async mounted() {
   
        this.tags = this.$store.state.tabsList;
    }
    @Watch('$route.meta.title', {
    deep: true })
    onTagsChange(newVal: any, oldVal: any) {
   
        if (newVal !== oldVal) {
   
            this.currentName = newVal;
        }
    }
    handleTabsEdit(targetName: any, action: any) {
   
        if (action === 'remove') {
   
            // tags
            let result = this.tags