keep-alive前进调用接口，后退显示缓存

功能介绍：运用keep-alive自带的方法，结合beforeRouteEnter和beforeRouteLeave方法实现前进重新加载页面，返回调用缓存数据。

1、APP.vue

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

2、index.js

{
	path: "/index",
	name: "index",
	component: () =>
		import ("../views/index.vue"),
	meta: {
		title: "首页",
		keepAlive: true, true设置缓存，flase不设置
	}
}

3、beforeRouteEnter和beforeRouteLeave的用法

了解to, from的用法

beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true;
    if (from.path !== "/index") {
      to.meta.keepAlive = true;
	  next();
    } else {
      from.meta.keepAlive = false;
      next();
    }
},
beforeRouteLeave(to, from, next) {
    if (to.path === "/index") {
      from.meta.keepAlive = true;
      next();
    } else {
      from.meta.keepAlive = false;
      next();
    }
},

HTTP协议中的Keep-Alive有什么问题？如何避免Keep-Alive问题？

什么是HTTP协议中的连接管理？HTTP协议有哪些连接管理策略？

HTTP协议中的HTTP Keep-Alive是什么？它的主要作用是什么？

Vue项目中如何使用keep-alive方法

vue缓存组件的正确写法及基本介绍

标签： keep-alive, 接口, 缓存

上面是“keep-alive前进调用接口，后退显示缓存”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2246.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！