keepAlive实践

使用环境

在项目中，当点击详情页切换到一个新的页面， 从详情页返回时，之前的页面会刷新，从而导致页面上之前的查询条件会被重置。这是一种很不友好的用户体验，每次查看详情回来都要重新选择之前的查询条件，如果这个时间， 条件很多，那基本上会崩溃~
这个时候，keepAlive就登场啦~

代码实践

keepAlive是vue的内置组件，所以直接使用就可以了

在你要缓存的页面渲染前包裹keep-alive

// 需要缓存的路由页面
<keep-alive>
     <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
// 不需要缓存的路由页面
<router-view v-if="!$route.meta.keepAlive"></router-view>

在路由文件中配置你需要缓存页面的keepAlive字段，不需要缓存的就不用加

{
	name: 'name',
	path: '/path/name',
	menuCode: 'nameCode',
	component: 'component/index',
	keepAlive: true
	// 网上还有种写法： 只要路由文件meta中能拿到keepAlive数据，都可以
	// meta: {
	//	keepAlive: true
	// }
}

页面中使用时，添加修改导入这种切页操作，再次返回列表时，是需要刷新页面列表数据的（纯展示页面切页不需要）
至于为什么不用网上说的actived：有些页面并不是一刷新就会在created中调用数据接口

beforeRouteEnter (to, from, next) {
      // 添加刷新列表
      if (from.name === 'face-info-manage-add') {
        next(vm => {
        // 你的列表调用函数， 一般添加需要将页码置为初始状态
          vm.getPageData()
        })
      }
    next()
  },

结论

• 要用keep-alive组件包裹需要缓存的页面
• 添加时一般页码置1