vue项目中如何使用keep-alive添加页面缓存

方法1：router.js添加配置参数

配置router时添加meta对象，配置路由中需要额外携带的参数信息

const routes = [{
	path: '/webScreen',
	name: '截屏',
	component: resolve => require(['@/views/webScreen/index.vue'], resolve),
	meta: {
	  keepAlive: true // 需要被缓存
	}
},{
  path: '/g6',
  name: '拓扑图',
  component: resolve => require(['@/views/g6/index.vue'], resolve),
  meta: {
	keepAlive: false // 不需要被缓存
  }
}]

视图组件中根据meta参数配置 添加keep-alive

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

方法2：页面监听路由，动态修改keepAlive，针对以下场景

列表页选完查询参数，下钻到详情页面，点击返回时希望列表页保持为下钻之前的状态；
但从其他页面切换到当前列表页面时无需缓存

	// 关键代码
	beforeRouteLeave(to, from, next) {
		// 设置下一个路由的 meta
		to.meta.keepAlive = true;  // 让 b 缓存，即不刷新
		next();
	}

参考文章

https://blog.csdn.net/qq_33505829/article/details/98847457

寄语

“素未谋面的朋友：及时行乐，活在当下，祝你也祝我～”