API及内置组件
本文档参考官方文档
useData
返回页面相关的数据
typescript
interface VitePressData {
site: Ref<SiteData>
page: Ref<PageData>
theme: Ref<any> // themeConfig from .vitepress/config.js
frontmatter: Ref<PageData['frontmatter']>
lang: Ref<string>
title: Ref<string>
description: Ref<string>
localePath: Ref<string>
isDark: Ref<boolean>
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
例如这段代码：
markdown
<script setup>
import { useData } from 'vitepress'
const data = useData()
</script>
<div>{{ data.title }}</div>
1
2
3
4
5
2
3
4
5
输出
"API及内置组件 | DDD的博客"
如果写在markdown里就只能获取对象的一级属性，写在vue里才可以获取多级的。
useRoute
返回当前route对象
typescript
interface Route {
path: string
data: PageData
component: Component | null
}
1
2
3
4
5
2
3
4
5
例如
typescript
import { useRoute } from 'vitepress'
const route = useRoute()
<div>{{ route.data }}</div>
1
2
3
4
2
3
4
输出
{
"title": "API及内置组件",
"description": "",
"frontmatter": {
"title": "API及内置组件"
},
"headers": [
{
"level": 2,
"title": "useData",
"slug": "usedata",
"link": "#usedata",
"children": []
},
{
"level": 2,
"title": "useRoute",
"slug": "useroute",
"link": "#useroute",
"children": []
},
{
"level": 2,
"title": "useRouter",
"slug": "userouter",
"link": "#userouter",
"children": []
},
{
"level": 2,
"title": "withBase",
"slug": "withbase",
"link": "#withbase",
"children": []
},
{
"level": 2,
"title": "<Content />",
"slug": "content",
"link": "#content",
"children": []
},
{
"level": 2,
"title": "<ClinetOnly />",
"slug": "clinetonly",
"link": "#clinetonly",
"children": []
}
],
"relativePath": "vitepress/API及内置组件.md",
"lastUpdated": 1667969822000
}
useRouter
返回router实例
typescript
interface Router {
route: Route
go: (href?: string) => Promise<void>
}
1
2
3
4
2
3
4
例如
typescript
import { useRouter } from 'vitepress'
const router = useRouter()
<div>{{ router }}</div>
1
2
3
4
2
3
4
输出
{
"route": {
"path": "/DDD-BLOG/vitepress/API%E5%8F%8A%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6.html",
"component": {
"name": "vitepress/API及内置组件.md",
"__ssrInlineRender": true
},
"data": {
"title": "API及内置组件",
"description": "",
"frontmatter": {
"title": "API及内置组件"
},
"headers": [
{
"level": 2,
"title": "useData",
"slug": "usedata",
"link": "#usedata",
"children": []
},
{
"level": 2,
"title": "useRoute",
"slug": "useroute",
"link": "#useroute",
"children": []
},
{
"level": 2,
"title": "useRouter",
"slug": "userouter",
"link": "#userouter",
"children": []
},
{
"level": 2,
"title": "withBase",
"slug": "withbase",
"link": "#withbase",
"children": []
},
{
"level": 2,
"title": "<Content />",
"slug": "content",
"link": "#content",
"children": []
},
{
"level": 2,
"title": "<ClinetOnly />",
"slug": "clinetonly",
"link": "#clinetonly",
"children": []
}
],
"relativePath": "vitepress/API及内置组件.md",
"lastUpdated": 1667969822000
}
}
}
withBase
将基础地址与所给的地址进行合并
typescript
(path: string) => string
1
示例可参考：Base URL
<Content />
不太明白
<ClinetOnly />
不太明白