项目中index.vue包含三个链接导航，page1--》page2和page1--》page3.依次前进，每次前进到新的页面需要获取数据，而后退时，从page2到page1或page3到page1，page1不在获取新的数据，而是使用缓存数据，page2与page3不需要缓存。可把page1想像成首页，page2和page3是两个内容展示页。
利用keep-alive缓存需要缓存的页面
1.在app.vue中改写router-view
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 page1-->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如,page2 , page3 -->
</router-view>
2.在router/index.js中添加路由元信息，设置需要缓存和不需要缓存的页面
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
keepAlive: true, //此组件需要被缓存
}
},
{
path: '/rule',
name: 'Rule',
component: Rule,
meta: {
keepAlive: true, //此组件需要被缓存
}
},
{
path: '/video',
name: 'VideoPage',
component: VideoPage,
meta: {
keepAlive: false, //此组件不需要被缓存
}
}
]
