VuePressVuePress
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 深入

    • 架构
    • 开发插件
    • 开发主题
  • Cookbook

    • 介绍
    • 客户端配置的使用方法
    • 添加额外页面
    • 开发一个可继承的主题
    • 向客户端代码传递数据
    • Markdown 与 Vue SFC
    • 解析路由

解析路由

获取全部路由

在开发主题和插件时,你可能希望获取所有页面的信息。通过 useRoutes 就可以获取所有页面的路由记录。

useRoutes 的返回值是一个包含了所有路由信息的 Ref 对象。其属性是每条路由的路由路径,对应的值是路径的路由信息。

import { useRoutes } from 'vuepress/client'

const routes = useRoutes()
// {
//   '/': { meta: { title: 'Home' }, loader: HomePageLoader },
//   '/404.html': { meta: { title: 'Not Found' }, loader: NotFoundPageLoader },
//   ...
// }

const routePaths = computed(() => Object.keys(routes.value))
// => [’/‘, '/404.html', '/foo/', '/bar/', ...]

解析路由地址

你可以使用 resolveRoutePath 来解析给定的链接对应的路由路径。

resolveRoutePath 接收一个链接地址和一个可选的基础路径,返回一个解析后的路由地址:

import { resolveRoutePath } from 'vuepress/client'

const routePath = resolveRoutePath('/foo/') // => '/foo/'
const routePath = resolveRoutePath('baz.html', '/foo/bar.html') // => '/foo/baz.html'

解析路由信息

你可以使用 resolveRoute 来解析给定的链接对应的路由信息。

resolveRoute 接收一个链接地址和一个可选的基础路径,返回一个解析后的路由信息:

import { resolveRoute } from 'vuepress/client'

const route = resolveRoute('/foo/') // => { notFound: false, path: '/foo/', meta: { title: 'Foo' }, loader: FooPageLoader }
const route = resolveRoute('baz.html', '/foo/bar.html') // => { notFound: false, path: '/foo/baz.html', meta: { title: 'Baz' }, loader: BazPageLoader }
const route = resolveRoute('/not-exist.html') // => { notFound: true, path: '/not-exist.html', meta: { title: 'Not Found' }, loader: NotFoundPageLoader }

路由信息中存在一个 notFound 字段,用于标识给定的路径是否存在对应的路由。当路由不存在时,返回值中的 notFound 字段为 true,其 path 字段为规范化后的路径,而 meta 和 loader 字段则会指向默认的 404 页面。

在 GitHub 上编辑此页
上次更新: 2024/5/24 08:18
贡献者: Mister-Hope, meteorlxy
Prev
Markdown 与 Vue SFC