feat: 为Frpc下载页面添加运行时缓存,避免重复请求触发限流

扩展路由元信息类型以支持页面缓存开关,在Layout中实现基于路由元的keep-alive逻辑,为Download组件设置对应名称和缓存标识,仅在应用运行时缓存页面,刷新仍需手动触发更新。
This commit is contained in:
Yuhang Wu
2026-10-16 13:44:20 +08:00
parent 5c1ce2fa5c
commit 57b4d7be5a
5 changed files with 73 additions and 3 deletions
+19 -1
View File
@@ -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
View File
@@ -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",
+3
View File
@@ -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)