vue移动端项目中如何实现页面缓存的示例代码

// src/store/modules/app.js

export 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.js

const getters = {
 cachePages: state => state.app.cachePages
}
export default getters

// src/store/index.js

import 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
 }
})

<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

// 创建一个mixin
// src/mixins/index.js

export 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()
  }
 }
}

<script>
import { savePosition } from '@/mixins'

export default {
 mixins: [new savePosition()]
}
</script>

<template>
  <div id="scroll-container" style="height: 100vh; overflow-y: scroll;">

  </div>
</template>

<script>
import { savePosition } from '@/mixins'

export default {
 mixins: [new savePosition('scroll-container')]
}
</script>