Vue：页面缓存

版权声明：转载请标明出处。 https://blog.csdn.net/qq_42172829/article/details/84281703

在Vue中页面缓存是个特别好用的模块。当你的页面不需要实时更新时，进入页面他会把这个页面加载入内存中，减少了不必要的后台请求，减轻后台压力。

上代码：App.vue

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

路由文件夹：index.js

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    {
    	path:'/searchingpet',
    	name:'searchingpet',
    	component:SearchingPet,
    	meta:{keepAlive:true}
    },
    {
    	path:'/pet_home',
    	name:'pet_home',
    	component:Pet_home,
    	meta:{keepAlive:true}
    },
	{
		path:'/shopdescribe',
		name:"shopdescribe",
		component:Shopdescribe,
		meta:{keepAlive:false}
	}
  ]
})

在你的项目中，需要这个页面加入到缓存就需要meta:{keepAlive:true}，不需要则设置为false。他会在你的组件视图页自动判断。

描述一个问题（不知道有没有人遇到过，在加入缓存之后出现的）：

在没有缓存的页面你的模板语法{{}}可能会因为加载问题出现某某某个Data变量找不到或者变量类型未定义找不到。

我的解决办法是先声明这个变量，把报错找不到的字段把其中的字段赋值为" "空，当加载请求时拿到数据他会自动覆盖。

有更好的办法请评论留言。