这篇文章主要介绍在vue移动端项目中怎么实现页面缓存，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
背景
在移动端中，页面跳转之间的缓存是必备的一个需求。
例如：首页=>列表页=>详情页。
从首页进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存。
对于首页，一般我们都会让其一直保持缓存的状态。
对于详情页，不管从哪个入口进入，都会让其重新刷新。
实现思路
说到页面缓存，在vue中那就不得不提keep-alive组件了，keep-alive提供了路由缓存功能，本文主要基于它和vuex来实现应用里的页面跳转缓存。
vuex里维护一个数组cachePages，用以保存当前需要缓存的页面。
keep-alive 的 includes 设置为cachePages。
路由meta添加自定义字段 needCachePages或keepAlive，needCachePages 为一个数组，表示该路由要进入的页面如果在数组内，则缓存该路由，keepAlive则表示无论进入哪个页面都保持缓存，如app首页这种。
在路由守卫beforeEach里判断，如果要跳转的路由页面在当前路由的needCachePages里，则当前路由添加进cachePages里，反之删除。
具体实现
vuex实现内容
// src/store/modules/app.jsexport default { state: { // 页面缓存数组 cachePages: [] }, mutations: { // 添加缓存页面 ADD_CACHE_PAGE(state, page) { if (!state.cachePages.includes(page)) { state.cachePages.push(page) } }, // 删除缓存页面 REMOVE_CACHE_PAGE(state, page) { if (state.cachePages.includes(page)) { state.cachePages.splice(state.cachePages.indexOf(page), 1) } } }}// src/store/getters.jsconst getters = { cachePages: state => state.app.cachePages}export default getters// src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import user from './modules/user'import app from './modules/app'import getters from './getters'// 导出 store 对象export default new Vuex.Store({ getters, modules: { user, app }})App.vue里，keep-alive的include设置cachePages
<keep-alive :include="cachePages"> <router-view :key="$route.fullPath"></router-view></keep-alive>computed: { ...mapGetters([ 'cachePages' ])}路由配置
{ path: '/home', name: 'Home', component: () => import('@/views/tabbar/Home'), meta: { title: '首页', keepAlive: true }},{ path: '/list', name: 'List', component: () => import('@/views/List'), meta: { title: '列表页', needCachePages: ['ListDetail'] }},{ path: '/list-detail', name: 'ListDetail', component: () => import('@/views/Detail'), meta: { title: '详情页' }}路由守卫
import Vue from 'vue'import Router from 'vue-router'import store from '@/store'Vue.use(Router)// 导入modules文件夹里的所有路由const files = require.context('./modules', false, /\.js$/)let modules = []files.keys().forEach(key => { modules = modules.concat(files(key).default)})// 路由const routes = [ { path: '/', redirect: '/home', }, ...modules]const router = new Router({ mode: 'hash', routes: routes})function isKeepAlive(route) { if (route.meta && route.meta.keepAlive) { store.commit('ADD_CACHE_PAGE', route.name) } if (route.children) { route.children.forEach(child => { isKeepAlive(child) }) }}routes.forEach(item => { isKeepAlive(item)})// 全局路由守卫router.beforeEach((to, from, next) => { if (from.meta.needCachePages && from.meta.needCachePages.includes(to.name)) { store.commit('ADD_CACHE_PAGE', from.name) } else if (from.meta.needCachePages) { store.commit('REMOVE_CACHE_PAGE', from.name) } // 出现页面首次缓存失效的情况，猜测是vuex到keep-alive缓存有延迟的原因 //这里使用延迟100毫秒解决 setTimeout(() => { next() }, 100)})export default router还原页面滚动条位置
此时虽然页面实现缓存了，但滚动条每次都会重新回到顶部。
对于缓存的页面，会触发activated和deactivated这两个钩子，可以利用这两个钩子来实现还原滚动条位置。
在页面离开时，也就是deactivated触发时记录滚动条位置。
在重新回到页面时，也就是activated触发时还原滚动条位置。
// 创建一个mixin// src/mixins/index.jsexport const savePosition = (scrollId = 'app') => { return { data() { return { myScrollTop: 0 } }, activated() { const target = document.getElementById(scrollId) target && target.scrollTop = this.myScrollTop }, beforeRouteLeave(to, from, next) { const target = document.getElementById(scrollId) this.myScrollTop = target.scrollTop || 0 next() } }}这里发现使用deactivated时会因为页面隐藏过快会导致获取的节点滚动条高度为0，所以用beforeRouteLeave。
在需要缓存的页面中使用
<script>import { savePosition } from '@/mixins'export default { mixins: [new savePosition()]}</script>如果页面自定义了滚动容器，此时可以传入滚动容器id
<template> <div id="scroll-container" > </div></template><script>import { savePosition } from '@/mixins'export default { mixins: [new savePosition('scroll-container')]}</script>注意
我的小伙伴经常会来问我一个问题，为什么我配置了却没有缓存的效果？
这个时候你就需要注意一个问题了，keep-alive的一个关键是路由里的name要和.vue文件里的name保持一致。
如果你的缓存没有生效，请首先检查一下两个name和needCachePages里是否一致。
以上是“在vue移动端项目中怎么实现页面缓存”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
