在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变量找不到或者变量类型未定义找不到。
我的解决办法是先声明这个变量,把报错找不到的字段把其中的字段赋值为" "空,当加载请求时拿到数据他会自动覆盖。
有更好的办法请评论留言。