timi/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

async load page component

Browse Source
This commit is contained in:
Timi
2025-07-22 15:04:04 +08:00
parent c26591a06a
commit aef44a528a
2 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/router/index.ts
View File

@ -1,6 +1,3 @@
import IndexLayout from "@/layout/IndexLayout.vue";
import ArticleDetail from "@/views/ArticleDetail.vue";
import ArticleIndex from "@/views/ArticleIndex.vue";
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router";
export default createRouter({ export default createRouter({
@ -9,22 +6,22 @@ export default createRouter({
{ {
path: "/", path: "/",
name: "Index", name: "Index",
component: IndexLayout, component: () => import("@/layout/IndexLayout.vue"),
children: [ children: [
{ {
path: "/", path: "/",
name: "ArticleIndex", name: "ArticleIndex",
component: ArticleIndex component: () => import("@/views/ArticleIndex.vue")
}, },
{ {
path: "/aid:id.html", path: "/aid:id.html",
name: "ArticleDetail", name: "ArticleDetail",
component: ArticleDetail component: () => import("@/views/ArticleDetail.vue")
}, },
{ {
path: "/about", path: "/about",
name: "About", name: "About",
component: ArticleDetail component: () => import("@/views/ArticleDetail.vue")
} }
] ]
} }

21
src/views/ArticleDetail.vue
View File

@ -38,10 +38,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ArticleAPI, ArticleView, Icon } from "timi-web"; import { ArticleAPI, ArticleView, Icon } from "timi-web";
import ArticleAbout from "@/components/article/template/ArticleAbout.vue";
import ArticleMusic from "@/components/article/template/ArticleMusic.vue";
import ArticlePublic from "@/components/article/template/ArticlePublic.vue";
import ArticleSoftware from "@/components/article/template/ArticleSoftware.vue";
import { type Component } from "vue"; import { type Component } from "vue";
const route = useRoute(); const route = useRoute();
@ -49,19 +45,20 @@ const router = useRouter();
const article = ref<ArticleView<any>>(); const article = ref<ArticleView<any>>();
const template = ref<Component | null>(null); const template = ref<Component | null>(null);
const templates: Record<string, Component> = { const templates: Record<string, () => Promise<Component>> = {
ABOUT: ArticleAbout, ABOUT: () => import("@/components/article/template/ArticleAbout.vue"),
MUSIC: ArticleMusic, MUSIC: () => import("@/components/article/template/ArticleMusic.vue"),
PUBLIC: ArticlePublic, PUBLIC: () => import("@/components/article/template/ArticlePublic.vue"),
SOFTWARE: ArticleSoftware SOFTWARE: () => import("@/components/article/template/ArticleSoftware.vue")
}; };
const isAboutRoute = computed(() => route.name === "About"); const isAboutRoute = computed(() => route.name === "About");
watch(article, () => { watch(article, () => {
if (article.value) { if (!article.value) {
const key = isAboutRoute.value ? "ABOUT" : article.value.type; return;
template.value = markRaw(templates[key]);
} }
const loader = templates[isAboutRoute.value ? "ABOUT" : article.value.type];
template.value = defineAsyncComponent(loader);
}); });
onMounted(async () => { onMounted(async () => {