Slidev 如何用 setup/routes.ts 给演示文稿添加自定义 Vue 页面

Slidev 如何用 setup/routes.ts 给演示文稿添加自定义 Vue 页面【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 的幻灯片页面来自 Markdown 文件但有时你需要一个独立于幻灯片的 Vue 页面——比如一个落地页、帮助页或自定义表单页。通过项目的setup/routes.ts文件你可以向 Slidev 应用的路由表中追加自定义路由让任意 Vue 组件挂载到指定 URL 上。适用前提你已有一个 Slidev 项目内容入口为slides.md环境满足 官方文档 要求的 Node.js 20.12.0。完成本文后访问新路径即可在浏览器中看到你的 Vue 页面。机制说明setup/ 目录约定如何生效Slidev 对 目录结构 有约定项目根目录下的setup/用于存放自定义 setup / hooks该目录及其中的所有文件都是可选的。路由扩展的加载流程在源码中可以直接看到虚拟模块模板按setup/routes.{ts,js,mts,mjs}的 glob 从项目根目录查找文件见 setups.tssetupModules列表包含routes。文件存在才会被注入filter(Boolean)会过滤掉不存在的匹配项。客户端在构建路由时先注册内置路由再用setups.reduce((routes, setup) setup(routes), routes)依次把内置路由数组传给每个 setup 函数见 routes.ts。也就是说你的setup/routes.ts接收到的routes参数就是完整的内置路由数组。内置路由中包含演示页/:no按页码播放幻灯片、/presenter/:no、/overview、/print、/export/:no?等路径以及一个通配 404 路由/:pathMatch(.*)*见 routes.ts。defineRoutesSetup的类型定义是RoutesSetup (routes: RouteRecordRaw[]) RouteRecordRaw[]见 setups.ts即函数接收当前路由数组返回新的路由数组。路由记录的写法遵循 Vue Router 的RouteRecordRaw格式。操作步骤1. 创建 Vue 页面组件在 目录结构 约定之外pages/目录由你自己创建位置在项目根目录。文档示例中的导入路径../pages/my-page.vue相对setup/目录指向的就是根目录下的pages/my-page.vue!-- pages/my-page.vue -- template h1My Page/h1 /template以上是最小示例内容可替换为任何 Vue 单文件组件的写法。2. 创建 setup/routes.ts按 Configure Routes 文档 的用法在项目根目录的setup/下创建routes.tsimport { defineRoutesSetup } from slidev/types export default defineRoutesSetup((routes) { return [ ...routes, { path: /my-page, component: () import(../pages/my-page.vue), }, ] })要点...routes展开保留全部内置路由这是文档给出的写法删掉它会破坏幻灯片等既有页面path是你希望访问的 URL 路径component使用动态导入指向 Vue 组件文件需要更多路由项时在数组中继续按 Vue Router 路由记录格式追加即可。3. 启动开发服务器并访问新路径在项目根目录启动开发服务器package.json中通常已由脚手架配好dev脚本npm run dev然后使用终端输出的本地地址访问/my-page路径。浏览器中显示my-page.vue的渲染结果即表示自定义路由注册成功。页面打不开时检查什么如果访问/my-page落入 404 页面对应内置的通配路由渲染packages/client/pages/404.vue说明自定义路由没有进入路由表按以下顺序核对文件名与位置是否为项目根目录setup/routes.ts——只匹配setup/routes.{ts,js,mts,mjs}这几种后缀见 setups.ts改名成setup/router.ts之类的写法不会被加载文件是否以export default导出一个返回路由数组的函数参数routes是否原样展开进了返回值component的动态导入路径相对于setup/目录是否正确pages/my-page.vue文件是否真实存在。限制与边界自定义页面与幻灯片体系相互独立它不进slides.md的页码序列也不受 Markdown 幻灯片的 frontmatter 控制就是一个挂在 Vue Router 上的普通 Vue 组件路由冲突由 Vue Router 的路由规则决定文档建议参考 Vue Router 官方文档config-routes.md 末尾给出了指引。示例使用/my-page这样的静态路径与内置的动态路径/:no、404 通配路径区分开避免歧义setup/routes.ts是可选文件不创建时一切按内置路由运行对现有幻灯片项目无影响。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考