使用 Vue 组件

示例展示

你好， Markdown 中的 Vue

当前计数为： 0

示例代码如下

<template>
    <color-picker size="mini"></color-picker>
</template>

<template>
    <div v-for="page in pages">
        <router-link :to="page.path">
            {{ extractFilename(page.path) }}
        </router-link>
    </div>

    <div>根据Router获取所有页面</div>
    <div v-for="page in pages">
        <router-link :to="page.path">
            {{ decodeURI(page.path) }}
        </router-link>
    </div>

    <div>使用 @temp/pages.js 获取页面</div>
    <!-- <div v-for="page in pagesTemp">
        {{ page }}
    </div> -->

    <div>根据 usePagesData Api 获取页面(可能会移除)</div>
    <div>{{ pagesList }}</div>
</template>

<script lang="ts" setup>
import { resolvers, usePagesData } from "@vuepress/client";
import { ref } from "vue";
import { RouterLink, useRoute, useRouter } from "vue-router";

// @ts-ignore
// import _pages from "@temp/pages";
// import type { Page } from "vuepress";

// const pagesTemp = computed(() => <Page[]>_pages);

const pagesData = usePagesData();
// console.log(usePageData().value)
// console.log(usePageFrontmatter().value)
// console.log(useSiteData().value)

const pagesList = ref<string[]>([]);
for (let page in pagesData.value) {
    pagesList.value.push(page);
}

const route = useRoute();
const router = useRouter();

// console.log("route =>", route)

const pages = router
    .getRoutes()
    .filter(
        (rt) => (rt.path.endsWith(".html") || rt.path.endsWith("/")) && rt.redirect == undefined
    )
    .filter((rt) => rt.path != route.path);

function extractFilename(path: string): string {
    const realPath = decodeURI(path);
    const realName = realPath.replace(/.*?([^\/]+)(\/|.html)$/g, (m, p) => p);
    return realPath.endsWith("/") ? "Readme.md" : realName + ".md";
}

pages.forEach((p) =>
    resolvers.resolvePageData(<string>p.name).then((page) => {
        console.table(page.frontmatter);
    })
);
</script>

<style lang="scss">
//
</style>