vue2菜单标签缓存

路由视图让keep-alive包围

<keep-alive :include="getTagsName"  :max="30">
    <router-view />
</keep-alive>

添加选择缓存的按钮

<el-tag
    v-for="(tag,i) in tags"  // 已打开的数组
    @close="doCloseTag(tag)" // 关闭事件
    @click="$router.push(tag)"  // 点击事件
    closable    // 可以删除
>{{ tag.title }}</el-tag>
doCloseTag(tag) {
  this.$store.commit("user/removeCache", tag);
},

vuex代码

// 3个路由信息：
// 1. state.cached 已打开的路由记录
// 2. tag 用户删除的路由信息
// 3. router.currentRoute 当前页面呈现着的路由信息
removeCache(state, tag) {
    let index = state.cached.findIndex(ele => ele.name === tag.name)
    if (index !== -1) {
        // 从记录删除
        state.cached.splice(index, 1);
        
        // 已经把所有记录删除，路由切换成固定页面
        if (state.cached.length === 0) {
            return router.push('/dashboard');
        }
        // 关闭掉的不是自己，不用切换路由
        if (router.currentRoute.name !== tag.name) return;

        // 接着路由导向到前一个或者后一个，路由先查看前一个记录，没有再查看后一个记录能否切换
        let nextTag = state.cached[index - 1] || state.cached[index];
        nextTag && router.push(nextTag);
    }
},

router.beforeEach

router.beforeEach((to, from, next) => {
  // 记录路由访问
  if (to?.meta?.title)
      store.commit('user/addCache', {
        name: to.name,  // 组件名称
        title: to.meta.title
      });
  next();
});