feat: 为Frpc下载页面添加运行时缓存,避免重复请求触发限流
扩展路由元信息类型以支持页面缓存开关,在Layout中实现基于路由元的keep-alive逻辑,为Download组件设置对应名称和缓存标识,仅在应用运行时缓存页面,刷新仍需手动触发更新。
This commit is contained in:
+19
-1
@@ -9,7 +9,12 @@
|
||||
<Aside />
|
||||
|
||||
<main class="min-w-0 flex-1 overflow-hidden">
|
||||
<router-view />
|
||||
<!-- 按路由 meta.isCache 决定是否缓存页面组件(keep-alive 不持久化,仅在应用运行时生效) -->
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -31,6 +36,19 @@ import { useUpdateStore } from "@/stores/update"
|
||||
const router = useRouter()
|
||||
const updateStore = useUpdateStore()
|
||||
|
||||
/**
|
||||
* 需要 keep-alive 缓存的页面组件名列表(由路由 meta.isCache 决定)。
|
||||
*
|
||||
* keep-alive 通过组件名匹配缓存,故约定:缓存页面的组件名需与路由 name 一致
|
||||
* (页面通过 defineOptions({ name }) 显式声明)。
|
||||
*/
|
||||
const cachedViews = computed(() =>
|
||||
router
|
||||
.getRoutes()
|
||||
.filter((record) => record.meta.isCache && record.name)
|
||||
.map((record) => String(record.name)),
|
||||
)
|
||||
|
||||
/** 点击标题栏“设置”按钮 → 跳转设置页 */
|
||||
function goToSetting() {
|
||||
router.push("/setting")
|
||||
|
||||
+12
-1
@@ -1,6 +1,16 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
|
||||
/** 路由元信息类型扩展 */
|
||||
declare module "vue-router" {
|
||||
interface RouteMeta {
|
||||
/** 页面标题(i18n key) */
|
||||
title?: string;
|
||||
/** 是否使用 keep-alive 缓存该页面组件(默认不缓存) */
|
||||
isCache?: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/",
|
||||
@@ -30,7 +40,8 @@ const routes: RouteRecordRaw[] = [
|
||||
path: "download",
|
||||
name: "Download",
|
||||
component: () => import("@/views/Download.vue"),
|
||||
meta: { title: "menu.download" },
|
||||
// 缓存该页面:避免每次进入都请求 GitHub 触发限流,需刷新时由用户手动点击刷新按钮
|
||||
meta: { title: "menu.download", isCache: true },
|
||||
},
|
||||
{
|
||||
path: "setting",
|
||||
|
||||
@@ -65,6 +65,9 @@ import { isTauri } from "@/utils/window"
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 组件名需与路由 name 一致,以便被 Layout 的 <keep-alive :include> 缓存
|
||||
defineOptions({ name: "Download" })
|
||||
|
||||
const loading = ref(false)
|
||||
const importing = ref(false)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user