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";
export default createRouter({
@ -9,22 +6,22 @@ export default createRouter({
{
path: "/",
name: "Index",
component: IndexLayout,
component: () => import("@/layout/IndexLayout.vue"),
children: [
{
path: "/",
name: "ArticleIndex",
component: ArticleIndex
component: () => import("@/views/ArticleIndex.vue")
},
{
path: "/aid:id.html",
name: "ArticleDetail",
component: ArticleDetail
component: () => import("@/views/ArticleDetail.vue")
},
{
path: "/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>
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";
const route = useRoute();
@ -49,19 +45,20 @@ const router = useRouter();
const article = ref<ArticleView<any>>();
const template = ref<Component | null>(null);
const templates: Record<string, Component> = {
ABOUT: ArticleAbout,
MUSIC: ArticleMusic,
PUBLIC: ArticlePublic,
SOFTWARE: ArticleSoftware
const templates: Record<string, () => Promise<Component>> = {
ABOUT: () => import("@/components/article/template/ArticleAbout.vue"),
MUSIC: () => import("@/components/article/template/ArticleMusic.vue"),
PUBLIC: () => import("@/components/article/template/ArticlePublic.vue"),
SOFTWARE: () => import("@/components/article/template/ArticleSoftware.vue")
};
const isAboutRoute = computed(() => route.name === "About");
watch(article, () => {
if (article.value) {
const key = isAboutRoute.value ? "ABOUT" : article.value.type;
template.value = markRaw(templates[key]);
if (!article.value) {
return;
}
const loader = templates[isAboutRoute.value ? "ABOUT" : article.value.type];
template.value = defineAsyncComponent(loader);
});
onMounted(async () => {