【前端页面缓存】

router.js 主要是注意页面的router的别名

export default [
  {
    path: '/ucenter',
    name: 'ucenter',
    components: {
      default: () => import('./index/index'),
      tabBar: () => import('../../components/TabBar'),
    },
    meta: {
      type: 'tabbar',
      title: '我的脸谱',
    },
  },
  {
    path: '/ucenter/myFocus',
    name: 'ucenter.myFocus',
    component: () => import('./myFocus/index'),
    meta: {
      title: '我的关注',
    },
  },
  {
    path: '/ucenter/myFans',
    name: 'ucenter.myFans',
    component: () => import('./myFans'),
    meta: {
      title: '我的粉丝',
    },
  },
  {
    path: '/ucenter/myProduction',
    name: 'ucenter.myProduction',
    component: () => import('./myProduction/index'),
    meta: {
      title: '我的作品',
    },
  },
  {
    path: '/ucenter/myCollect',
    name: 'ucenter.myCollect',
    component: () => import('./myCollect/index'),
    meta: {
      title: '我的收藏',
    },
  },
  {
    path: '/ucenter/myLikes',
    name: 'ucenter.myLikes',
    component: () => import('./myLikes/index'),
    meta: {
      title: '我赞过的',
    },
  },
  {
    path: '/ucenter/institute',
    name: 'ucenter.institute',
    component: () => import('./institute/index'),
    meta: {
      title: '创作学院',
    },
  },
  {
    path: '/ucenter/notice',
    name: 'ucenter.notice',
    component: () => import('./notice/index'),
    meta: {
      title: '顺丰脸谱社区公约',
    },
  },
  {
    path: '/ucenter/sign',
    name: 'ucenter.sign',
    component: () => import('./sign/index'),
    meta: {
      title: '个性签名',
    },
  },
];

在index.vue中使用useCacheManage 将需要去的页面加在缓存中

<template>
  <div class="page-ucenter-myFocus">
    <div
      class="page-ucenter-myFocus-tabbar"
      v-if="!(tabs.length === 1 && tabs[0].code === 'theme')"
    >
      <div
        :class="[
          'page-ucenter-myFocus-tabbar-item',
          { active: tab.code === currentTab.code },
        ]"
        v-for="tab in tabs"
        :key="tab.code"
        @click="changeCurrentTab(tab.code)"
      >
        {{ tab.name }}
      </div>
    </div>
    <div class="page-ucenter-myFocus-line"></div>
    <div class="page-ucenter-myFocus-list">
      <Component
        :is="currentTabComponent"
        :keywords="keywords"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageUcenterMyFocus'
}
</script>

<script setup>
import FocusUser from './comp/focusUser/index'
import FocusTopic from './comp/focusTopic/index'
import { useCacheManage } from '@apps/FaceBook/hooks/useCacheManage'
import { useGlobalProperties } from '@/hooks/useGlobal'

const { $sensors } = useGlobalProperties()

const tabs = [
  {
    code: 'user',
    name: '用户'
  },
  {
    code: 'theme',
    name: '主题'
  }
]

// 当前tab
const currentTab = ref(tabs[0])

// 改变tab
const changeCurrentTab = (code) => {
  currentTab.value = tabs.filter((tab) => tab.code === code)[0]
  // 神策打点
  $sensors.Click({
    $title: '我的关注',
    $element_name: '首页>我的>我的关注',
    $element_content: currentTab.value.name
  })
}

const currentTabComponent = computed(() => {
  let component

  switch (currentTab.value.code) {
    case 'user':
      component = FocusUser
      break
    case 'theme':
      component = FocusTopic
      break
  }

  return component
})

// 页面缓存管理
useCacheManage({
  cacheName: 'PageUcenterMyFocus',
  positive: ['ucenter.myFocus', 'ucenter.myFans', 'topic.detail', 'uhome']
})
</script>

<style lang="scss">
@import 'index';
</style>

useCacheManage.js 这个就是封装的缓存方法

import { useCacheStore } from '../stores/useCacheStore'
import { onBeforeRouteLeave } from 'vue-router'

export const useCacheManage = ({
  cacheName = '',
  positive = [],
  // negative = [] // todo: keep for future
}) => {
  const cacheStore = useCacheStore()

  onMounted(() => {
    cacheStore.addCacheView(cacheName)
  })

  onBeforeRouteLeave(async (to, from, next) => {
    // if (negative.length) {
    // }
    if (positive.length) {
      if (positive.includes(to.name)) {
        cacheStore.addCacheView(cacheName)
      } else {
        cacheStore.delCacheView(cacheName)
      }
    }
    await nextTick()
    next()
  })
}

useCacheStore.js 使用pina做状态管理

export const useCacheStore = defineStore({
  id: 'AppPageCache',
  state: () => ({
    cachedViews: []
  }),
  actions: {
    addCacheView (pageName = '') {
      if (pageName === '') return
      if (!this.cachedViews.includes(pageName)) {
        this.cachedViews.push(pageName)
      }
    },
    delCacheView (pageName = '') {
      const index = this.cachedViews.findIndex(v => v === pageName)
      if (index !== -1) {
        this.cachedViews.splice(index, 1)
      }
    }
  }
})