利用keep-alive实现指定页面缓存

项目中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, //此组件不需要被缓存
      }

    }
  ]