vue keepAlive缓存页面（简单粗暴）

最近脚撸一个后台管理系统的模板，其中用到了缓存。网上找了很多内容，也没能找到想要的答案。

其实vue实现缓存页面很简单。如下：
1、index.js

		{
    
    
        path: '/thesisUpload',
        name: 'ThesisUpload',
        component: () => import('../views/graduationProject/ThesisUpload.vue'),
        meta: {
    
    
          keepAlive: true                   //需要缓存的组件
        }
      },
      {
    
    
        path: '/knowledgeGraph',
        name: 'KnowledgeGraph',
        component: () => import('../views/graduationProject/KnowledgeGraph.vue'),
        meta: {
    
    
          keepAlive: false                  //不需要缓存的组件
        }
      }

2、

		<keep-alive :include="keepAliveList">
			// 展示并缓存设置为true的页面   
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        //展示设置为false的页面
        <router-view v-if="!$route.meta.keepAlive"></router-view>

3、在不想要缓存的时候清空缓存页面

		this.keepAliveList.push(url)

不需要缓存的时候

	  let index2 = this.keepAliveList.findIndex((item) => {
    
    
        return url === item
      })
      this.keepAliveList.splice(index2, 1)

这里的url和item都是改页面路由的name属性

效果：

删除以后确确实实是没有缓存了