Element-UI实现来回切换页面不初始化，实现缓存效果，关闭时页面缓存失效（keepAlive）

Element-UI实现来回切换页面不初始化，实现缓存效果，关闭时页面缓存失效（keepAlive）

1、使用vue自带keep-alive组件，在vue官方文档2.1以上有include 和 exclude 属性允许组件有条件地缓存

原始代码如下：

<keep-alive :include="keepAliveRouter">

    <router-view></router-view>

</keep-alive>

 

    computed: {

      keepAliveRouter(){

        return this.$store.state.tagsView.keepAliveRouter

      },

注释：keepAliveRouter存储需要缓存的组件

2、 将左侧菜单的选中项和keepAliveRouter缓存到store中，并显示在导航tab块的tagsView。

tagsView.js添加代码

点击左侧菜单栏时，keepAliveRouter和visitedViews数据同步添加即可。

点击导航方块的关闭按钮，keepAliveRouter和visitedViews数据同步移除。

注意：keepAliveRouter组件名name必须和vue页面组件名一致，否则失效