在移動(dòng)端中，頁(yè)面跳轉(zhuǎn)之間的緩存是必備的一個(gè)需求。

例如：首頁(yè)=>列表頁(yè)=>詳情頁(yè)。

從首頁(yè)進(jìn)入列表頁(yè)，列表頁(yè)需要刷新，而從詳情頁(yè)返回列表頁(yè)，列表頁(yè)則需要保持頁(yè)面緩存。

對(duì)于首頁(yè)，一般我們都會(huì)讓其一直保持緩存的狀態(tài)。

對(duì)于詳情頁(yè)，不管從哪個(gè)入口進(jìn)入，都會(huì)讓其重新刷新。

說(shuō)到頁(yè)面緩存，在vue中那就不得不提keep-alive組件了，keep-alive提供了路由緩存功能，本文主要基于它和vuex來(lái)實(shí)現(xiàn)應(yīng)用里的頁(yè)面跳轉(zhuǎn)緩存。

vuex里維護(hù)一個(gè)數(shù)組cachePages，用以保存當(dāng)前需要緩存的頁(yè)面。keep-alive 的 includes 設(shè)置為cachePages。路由meta添加自定義字段 needCachePages或keepAlive，needCachePages 為一個(gè)數(shù)組，表示該路由要進(jìn)入的頁(yè)面如果在數(shù)組內(nèi)，則緩存該路由，keepAlive則表示無(wú)論進(jìn)入哪個(gè)頁(yè)面都保持緩存，如app首頁(yè)這種。在路由守衛(wèi)beforeEach里判斷，如果要跳轉(zhuǎn)的路由頁(yè)面在當(dāng)前路由的needCachePages里，則當(dāng)前路由添加進(jìn)cachePages里，反之刪除。

vuex實(shí)現(xiàn)內(nèi)容

// src/store/modules/app.jsexport default { state: { // 頁(yè)面緩存數(shù)組 cachePages: [] }, mutations: { // 添加緩存頁(yè)面 ADD_CACHE_PAGE(state, page) { if (!state.cachePages.includes(page)) { state.cachePages.push(page) } }, // 刪除緩存頁(yè)面 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’// 導(dǎo)出 store 對(duì)象export default new Vuex.Store({ getters, modules: { user, app }})

App.vue里，keep-alive的include設(shè)置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: ’首頁(yè)’, keepAlive: true }},{ path: ’/list’, name: ’List’, component: () => import(’@/views/List’), meta: { title: ’列表頁(yè)’, needCachePages: [’ListDetail’] }},{ path: ’/list-detail’, name: ’ListDetail’, component: () => import(’@/views/Detail’), meta: { title: ’詳情頁(yè)’ }}

路由守衛(wèi)

import Vue from ’vue’import Router from ’vue-router’import store from ’@/store’Vue.use(Router)// 導(dǎo)入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)})// 全局路由守衛(wèi)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) } // 出現(xiàn)頁(yè)面首次緩存失效的情況，猜測(cè)是vuex到keep-alive緩存有延遲的原因 //這里使用延遲100毫秒解決 setTimeout(() => { next() }, 100)})export default router還原頁(yè)面滾動(dòng)條位置

此時(shí)雖然頁(yè)面實(shí)現(xiàn)緩存了，但滾動(dòng)條每次都會(huì)重新回到頂部。

對(duì)于緩存的頁(yè)面，會(huì)觸發(fā)activated和deactivated這兩個(gè)鉤子，可以利用這兩個(gè)鉤子來(lái)實(shí)現(xiàn)還原滾動(dòng)條位置。

在頁(yè)面離開(kāi)時(shí)，也就是deactivated觸發(fā)時(shí)記錄滾動(dòng)條位置。

在重新回到頁(yè)面時(shí)，也就是activated觸發(fā)時(shí)還原滾動(dòng)條位置。

// 創(chuàng)建一個(gè)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() } }}

這里發(fā)現(xiàn)使用deactivated時(shí)會(huì)因?yàn)轫?yè)面隱藏過(guò)快會(huì)導(dǎo)致獲取的節(jié)點(diǎn)滾動(dòng)條高度為0，所以用beforeRouteLeave。

在需要緩存的頁(yè)面中使用

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

如果頁(yè)面自定義了滾動(dòng)容器，此時(shí)可以傳入滾動(dòng)容器id

<template> <div style='height: 100vh; overflow-y: scroll;'> </div></template><script>import { savePosition } from ’@/mixins’export default { mixins: [new savePosition(’scroll-container’)]}</script>注意

我的小伙伴經(jīng)常會(huì)來(lái)問(wèn)我一個(gè)問(wèn)題，為什么我配置了卻沒(méi)有緩存的效果？

這個(gè)時(shí)候你就需要注意一個(gè)問(wèn)題了，keep-alive的一個(gè)關(guān)鍵是路由里的name要和.vue文件里的name保持一致。

如果你的緩存沒(méi)有生效，請(qǐng)首先檢查一下兩個(gè)name和needCachePages里是否一致。

此方案是我一年多前的做法，現(xiàn)在想來(lái)其實(shí)還是存在一些不足的，比如每次都需要去配置路由里的needCachePages。

而實(shí)際上在移動(dòng)端中，往往都是在返回上一頁(yè)時(shí)，上一頁(yè)始終保持緩存的狀態(tài)，就如開(kāi)發(fā)小程序時(shí)一樣，當(dāng)我們調(diào)用navigateTo后再返回，頁(yè)面始終是緩存的并不需要任何人為的配置。

所以現(xiàn)在的想法是，在vue中提供一個(gè)全局的跳轉(zhuǎn)api，只要調(diào)用該api就把當(dāng)前頁(yè)面緩存，如果需要刷新操作，可以像小程序里的onShow一樣在activated里執(zhí)行你的邏輯。

到此這篇關(guān)于vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼的文章就介紹到這了,更多相關(guān)vue 頁(yè)面緩存內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！