Vue移动端项目中如何实现页面缓存长尾词优化？

本文共计1334个文字，预计阅读时间需要6分钟。

背景+在移动端中，页面跳转之间的缓存是必备的需求。例如：首页=列表页=详情页。从首页进入列表页，列表页需要刷新；而从详情页返回列表页，列表页则需保持缓存。

背景

在移动端中，页面跳转之间的缓存是必备的一个需求。

例如：首页=>列表页=>详情页。

从首页进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存。

对于首页，一般我们都会让其一直保持缓存的状态。

对于详情页，不管从哪个入口进入，都会让其重新刷新。

实现思路

说到页面缓存，在vue中那就不得不提keep-alive组件了，keep-alive提供了路由缓存功能，本文主要基于它和vuex来实现应用里的页面跳转缓存。

vuex里维护一个数组cachePages，用以保存当前需要缓存的页面。
keep-alive 的 includes 设置为cachePages。
路由meta添加自定义字段 needCachePages或keepAlive，needCachePages 为一个数组，表示该路由要进入的页面如果在数组内，则缓存该路由，keepAlive则表示无论进入哪个页面都保持缓存，如app首页这种。
在路由守卫beforeEach里判断，如果要跳转的路由页面在当前路由的needCachePages里，则当前路由添加进cachePages里，反之删除。