Vue利用keep-alive实现路由页面缓存

问题

页面跳转后保留原页面的内容，包括已获取的数据，当前分页等，以便后续返回时查看

解决方案

主要通过Vue-router和keep-alive标签进行处理

Vue 页面

<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
  </router-view>
</template>

router.js

export default [{
  path: '/example',
  name: 'example',
  component: Main,
  meta: {
    keepAlive: true,
    title: '路由示例',
    icon: 'md-list'
  }
}]