Skip to content

Commit

Permalink
docs: add router docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Mister-Hope committed Jan 24, 2024
1 parent 0d39f6d commit 310414c
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 0 deletions.
49 changes: 49 additions & 0 deletions docs/advanced/cookbook/page-data-and-meta.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# Page Data and Page Meta

For scalability reasons, VuePress bind page data together with page component and make them async. This means that data and component for every page is only loaded once the page is being visited, and you can only synchronously access current page data.

But there are some times that you want to access page data in other pages, e.g.: You need to access their title to display them in navbar and sidebar, and for blogging feature you may need to synchronously access their date and tags to display them in blog index page. So we add page meta concept for it.

On node side, `data` and `meta` property `Page` object are page data and page meta, and you can access and modify them in plugin API lifecycle hooks like `onInitialized` and `extendsPage`:

```js
export default {
extendsPage: (page) => {
if (page.path === '/') {
// set page data
page.data = { ...page.data, foo: 'bar1' }

// set page meta
page.meta = { ...page.meta, bar: 'baz1' }
}
if (page.path === '/zh/') {
// set page data
page.data = { ...page.data, foo: 'bar2' }

// set page meta
page.meta = { ...page.meta, bar: 'baz2' }
}
},
}
```

At client, you can call `resolve` from `@vuepress/client` to access page meta and call `usePageData` from `@vuepress/client` to access current page data:

```js
import { resolve, usePageData } from '@vuepress/client'

// you can access any page meta
resolve('/') // { path: "/", meta: { bar: "baz1", ... } }
resolve('/zh/') // { path: "/zh/", meta: { bar: "baz2", ... } }

// a computed page data
const pageData = usePageData()

// when you are at `/`
pageData.value // { foo: "bar1", ... }

// when you are at `/zh/`
pageData.value // { foo: "bar2", ... }
```

You should try to store data of pages in page data as first choice, and only use page meta when the data need to be accessed globally or in other pages.
20 changes: 20 additions & 0 deletions docs/reference/client-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,26 @@ Client API is provided by [@vuepress/client](https://www.npmjs.com/package/@vuep
- Also see:
- [Guide > Assets > Base Helper](../guide/assets.md#base-helper)

## Router

### getPagesPath

- Details:

Returns the path of all pages.

### isPageExists

- Details:

Check whether a related page exists for the given path.

### resolve

- Details:

Return the resolved path and page meta of the given path.

## Constants

There are some constants that available in the client side code.
Expand Down
49 changes: 49 additions & 0 deletions docs/zh/advanced/cookbook/page-data-and-meta.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# 页面数据和页面元数据

出于可扩展性的原因,VuePress将页面数据与页面组件绑定在一起,并使它们异步加载。这意味着每个页面的数据和组件仅在访问页面时加载,并且你只能同步访问当前页面的数据。

但有时候你想在其他页面中访问页面数据,例如:你需要访问它们的标题以在导航栏和侧边栏中显示它们,在博客功能中,你可能需要同步访问它们的日期和标签以在博客索引页面中显示它们。因此,我们添加了页面元数据的概念。

在 Node 一侧,`data``meta` 属性是 `Page` 对象的页面数据和页面元数据,你可以在插件 API 生命周期钩子(如 `onInitialized``extendsPage`)中访问和修改它们:

```js
export default {
extendsPage: (page) => {
if (page.path === '/') {
// 设置页面数据
page.data = { ...page.data, foo: 'bar1' }

// 设置页面元数据
page.meta = { ...page.meta, bar: 'baz1' }
}
if (page.path === '/zh/') {
// 设置页面数据
page.data = { ...page.data, foo: 'bar2' }

// 设置页面元数据
page.meta = { ...page.meta, bar: 'baz2' }
}
},
}
```

在客户端,你可以从 `@vuepress/client` 中调用 `resolve` 来访问页面元数据,调用 `usePageData` 来访问当前页面数据:

```js
import { resolve, usePageData } from '@vuepress/client'

// 你可以访问任何页面元数据
resolve('/') // { path: "/", meta: { bar: "baz1", ... } }
resolve('/zh/') // { path: "/zh/", meta: { bar: "baz2", ... } }

// 计算出的页面数据
const pageData = usePageData()

// 当你在 `/` 页面时
pageData.value // { foo: "bar1", ... }

// 当你在 `/zh/` 页面时
pageData.value // { foo: "bar2", ... }
```

你应该尽可能将页面的数据存储在页面数据中作为首选,只有在需要全局或其他页面访问数据时才使用页面元数据。
20 changes: 20 additions & 0 deletions docs/zh/reference/client-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,26 @@
- 参考:
- [指南 > 静态资源 > Base Helper](../guide/assets.md#base-helper)

## 路由

### getPagesPath

- 详情:

返回所有页面的路径

### isPageExists

- 详情:

检查给定的路径是否有对应页面

### resolve

- 详情:

返回给定路径对应的页面实际路径与页面 meta。

## 常量

在客户端代码中有一些常量可以使用。
Expand Down

0 comments on commit 310414c

Please sign in to comment.