vue KeepAlive缓存切换页面时不用刷新请求

App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

Home.vue

<input type="text" v-model="username" />

About.vue

<input type="text" v-model="username" />

在Home和About文本框分别输入值后切换，会发现值会消失

解决方法

router.js里面添加meta: {keepAlive: true}，配置如下：

  {
    path: "/",
    name: "home",
    component: HomeView,
	meta: {keepAlive: true}
  },
  {
    path: "/about",
    name: "about",
	meta: {keepAlive: true},
    component: () =>
      import("../views/AboutView.vue"),
  },

App.vue

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

我们再次输入值测试会发现值不会消失

清除

指定路由判断以及清除，如果我们点击详情页面时，会把缓存关闭，我们在详情页返回About.vue页面时，里面的值就消失了。

<a class="primary" @click="detail">详情</a>

created(){
		this.list()
},
beforeRouteLeave (to, from, next) {
        if (to.name == "Detail"){
            from.meta.keepAlive = false;
        }else{
            from.meta.keepAlive = true;
        }
		console.log(to.name)
        next();
   },

detail(){
	let id = 3
	this.$router.push({ name: 'Detail', query: { id: id }})
}

Detail.vue

<el-button type="warning" class="go-back" @click="goBack">返回</el-button>

goBack(){
	router.go(-1);
}