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