vue实现动态面包屑选项卡缓存（keep-alive）

效果：

页面缓存使用了keep-alive 

在主页中：

<transition name="move" mode="out-in">
  <keep-alive :include="tagsList">
    <router-view></router-view>
  </keep-alive>
</transition>

include中可以存放数组，存放打开页面的name ，此处就是把页面当做一个组件，动态的获取可以缓存的页面。(每个页面写name这个很重要,并且name要和router文件夹下配置的路由name一致)；

还需要有一个bus.js文件 , 非父子组件通信的时候用到。

import Vue from 'vue';

const bus = new Vue();

export default bus;

bus.$on('tags', res);         //取
bus.$emit('tags',tagsList);   //存

tags.vue页面

点击事件和关闭事件都要最后都要bus.$emit('tag'.tagsList)。

 

可能不完善的小demo。