router-view实现页面缓存机制

项目中页面进行跳转时，大多都会向服务器发送请求，不仅会增加服务器的压力，页面的加载相对来说也会比较慢。

在vue中可以利用router-view来实现页面的缓存机制，减少请求的次数。

①App.vue

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

②main.js

我这里需要缓存的页面一个是新闻的列表页，一个是新闻详情页

{path: '/newslst', component: TestNews,meta:{keepAlive:true}},
{path: '/detail/:aid', component: TestDetail,meta:{keepAlive:true}}

在配置路由中加入meta属性，需要设置缓存的就将keepAlive:true设置为true，不需要的就false。

在这里给一个小提示，页面需要实时更新的话，就不建议用缓存。