在Vue中经常会遇到需要缓存页面的情况，如果不对Vue进行处理，那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后，再从菜谱详情页中返回到菜谱列表页面中时，菜谱列表是不需要进行刷新的，一个是增加了不必要的网路请求，第二个是如推荐菜谱后台是实时推荐的，每次请求的数据都不一定一样的，这样在用户退出后甚至找不到之前的进入位置，造成了很不好的用户体验。类似的情况还有很多，那么如何在Vue中控制页面是否刷新呢？
菜谱列表页.jpg
菜谱详情页图1.jpg
-
公共处理
首先需要在App.vue进行处理，通过meta中keepAlive字段进行区分；当需要缓存页面时，用<keep-alive>便签进行包裹，并将v-if绑定路由中meta.keepAlive属性，同时别忘了设置不需要缓存的<router-view>，通过v-if绑定meta.keepAlive的取反值。
<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>
设置方法
-
方法一 直接在路由文件中进行设置：
在路由列表中，找到需要缓存的页面，设置meta对象，将keepAlive设置为true，如下
const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: { keepAlive: true }
},
{
path: "/cookbookInfo",
name: "cookbookInfo",
component: cookbookInfo
}
];
- 方法二 在路由守卫中，拦截对应的页面，通过代码设置其对应meta中keepAlive属性
router.beforeEach((to, from, next) => {
console.log("即将跳转，原路由 ------------------------ > " + from.name);
if (from.name === "Home") {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
}
next();
});
注意：以上两种方法都可以对路由是否缓存进行设置，如果不论何种情况下都要缓存页面，可以直接采用第一种方法，当然第二种情况同样可以满足情况；但是如果需要区分从不同页面跳转的情况来确定是否需要缓存的话，就需要用到第二种方法。
