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)會過濾掉不存在的匹配項?？蛻舳嗽跇嫿酚蓵r先注冊內置路由再用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是可選文件不創建時一切按內置路由運行對現有幻燈片項目無影響?！久赓M下載鏈接】slidevPresentation Slides for Developers項目地址: https://gitcode.com/GitHub_Trending/sl/slidev創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考