Slidev 如何用 setup/routes.ts 給演示文稿添加自定義 Vue 頁面【免費(fèi)下載鏈接】slidevPresentation Slides for Developers項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 的幻燈片頁面來自 Markdown 文件但有時(shí)你需要一個(gè)獨(dú)立于幻燈片的 Vue 頁面——比如一個(gè)落地頁、幫助頁或自定義表單頁。通過項(xiàng)目的setup/routes.ts文件你可以向 Slidev 應(yīng)用的路由表中追加自定義路由讓任意 Vue 組件掛載到指定 URL 上。適用前提你已有一個(gè) Slidev 項(xiàng)目內(nèi)容入口為slides.md環(huán)境滿足 官方文檔 要求的 Node.js 20.12.0。完成本文后訪問新路徑即可在瀏覽器中看到你的 Vue 頁面。機(jī)制說明setup/ 目錄約定如何生效Slidev 對 目錄結(jié)構(gòu) 有約定項(xiàng)目根目錄下的setup/用于存放自定義 setup / hooks該目錄及其中的所有文件都是可選的。路由擴(kuò)展的加載流程在源碼中可以直接看到虛擬模塊模板按setup/routes.{ts,js,mts,mjs}的 glob 從項(xiàng)目根目錄查找文件見 setups.tssetupModules列表包含routes。文件存在才會(huì)被注入filter(Boolean)會(huì)過濾掉不存在的匹配項(xiàng)?？蛻舳嗽跇?gòu)建路由時(shí)先注冊內(nèi)置路由再用setups.reduce((routes, setup) setup(routes), routes)依次把內(nèi)置路由數(shù)組傳給每個(gè) setup 函數(shù)見 routes.ts。也就是說你的setup/routes.ts接收到的routes參數(shù)就是完整的內(nèi)置路由數(shù)組。內(nèi)置路由中包含演示頁/:no按頁碼播放幻燈片、/presenter/:no、/overview、/print、/export/:no?等路徑以及一個(gè)通配 404 路由/:pathMatch(.*)*見 routes.ts。defineRoutesSetup的類型定義是RoutesSetup (routes: RouteRecordRaw[]) RouteRecordRaw[]見 setups.ts即函數(shù)接收當(dāng)前路由數(shù)組返回新的路由數(shù)組。路由記錄的寫法遵循 Vue Router 的RouteRecordRaw格式。操作步驟1. 創(chuàng)建 Vue 頁面組件在 目錄結(jié)構(gòu) 約定之外pages/目錄由你自己創(chuàng)建位置在項(xiàng)目根目錄。文檔示例中的導(dǎo)入路徑../pages/my-page.vue相對setup/目錄指向的就是根目錄下的pages/my-page.vue!-- pages/my-page.vue -- template h1My Page/h1 /template以上是最小示例內(nèi)容可替換為任何 Vue 單文件組件的寫法。2. 創(chuàng)建 setup/routes.ts按 Configure Routes 文檔 的用法在項(xiàng)目根目錄的setup/下創(chuàng)建routes.tsimport { defineRoutesSetup } from slidev/types export default defineRoutesSetup((routes) { return [ ...routes, { path: /my-page, component: () import(../pages/my-page.vue), }, ] })要點(diǎn)...routes展開保留全部內(nèi)置路由這是文檔給出的寫法刪掉它會(huì)破壞幻燈片等既有頁面path是你希望訪問的 URL 路徑component使用動(dòng)態(tài)導(dǎo)入指向 Vue 組件文件需要更多路由項(xiàng)時(shí)在數(shù)組中繼續(xù)按 Vue Router 路由記錄格式追加即可。3. 啟動(dòng)開發(fā)服務(wù)器并訪問新路徑在項(xiàng)目根目錄啟動(dòng)開發(fā)服務(wù)器package.json中通常已由腳手架配好dev腳本npm run dev然后使用終端輸出的本地地址訪問/my-page路徑。瀏覽器中顯示my-page.vue的渲染結(jié)果即表示自定義路由注冊成功。頁面打不開時(shí)檢查什么如果訪問/my-page落入 404 頁面對應(yīng)內(nèi)置的通配路由渲染packages/client/pages/404.vue說明自定義路由沒有進(jìn)入路由表按以下順序核對文件名與位置是否為項(xiàng)目根目錄setup/routes.ts——只匹配setup/routes.{ts,js,mts,mjs}這幾種后綴見 setups.ts改名成setup/router.ts之類的寫法不會(huì)被加載文件是否以export default導(dǎo)出一個(gè)返回路由數(shù)組的函數(shù)參數(shù)routes是否原樣展開進(jìn)了返回值component的動(dòng)態(tài)導(dǎo)入路徑相對于setup/目錄是否正確pages/my-page.vue文件是否真實(shí)存在。限制與邊界自定義頁面與幻燈片體系相互獨(dú)立它不進(jìn)slides.md的頁碼序列也不受 Markdown 幻燈片的 frontmatter 控制就是一個(gè)掛在 Vue Router 上的普通 Vue 組件路由沖突由 Vue Router 的路由規(guī)則決定文檔建議參考 Vue Router 官方文檔config-routes.md 末尾給出了指引。示例使用/my-page這樣的靜態(tài)路徑與內(nèi)置的動(dòng)態(tài)路徑/:no、404 通配路徑區(qū)分開避免歧義setup/routes.ts是可選文件不創(chuàng)建時(shí)一切按內(nèi)置路由運(yùn)行對現(xiàn)有幻燈片項(xiàng)目無影響。【免費(fèi)下載鏈接】slidevPresentation Slides for Developers項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slidev創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Slidev 如何用 setup/routes.ts 給演示文稿添加自定義 Vue 頁面
Slidev 如何用 setup/routes.ts 給演示文稿添加自定義 Vue 頁面【免費(fèi)下載鏈接】slidevPresentation Slides for Developers項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 的幻燈片頁面來自 Markdown 文件但有時(shí)你需要一個(gè)獨(dú)立于幻燈片的 Vue 頁面——比如一個(gè)落地頁、幫助頁或自定義表單頁。通過項(xiàng)目的setup/routes.ts文件你可以向 Slidev 應(yīng)用的路由表中追加自定義路由讓任意 Vue 組件掛載到指定 URL 上。適用前提你已有一個(gè) Slidev 項(xiàng)目內(nèi)容入口為slides.md環(huán)境滿足 官方文檔 要求的 Node.js 20.12.0。完成本文后訪問新路徑即可在瀏覽器中看到你的 Vue 頁面。機(jī)制說明setup/ 目錄約定如何生效Slidev 對 目錄結(jié)構(gòu) 有約定項(xiàng)目根目錄下的setup/用于存放自定義 setup / hooks該目錄及其中的所有文件都是可選的。路由擴(kuò)展的加載流程在源碼中可以直接看到虛擬模塊模板按setup/routes.{ts,js,mts,mjs}的 glob 從項(xiàng)目根目錄查找文件見 setups.tssetupModules列表包含routes。文件存在才會(huì)被注入filter(Boolean)會(huì)過濾掉不存在的匹配項(xiàng)?？蛻舳嗽跇?gòu)建路由時(shí)先注冊內(nèi)置路由再用setups.reduce((routes, setup) setup(routes), routes)依次把內(nèi)置路由數(shù)組傳給每個(gè) setup 函數(shù)見 routes.ts。也就是說你的setup/routes.ts接收到的routes參數(shù)就是完整的內(nèi)置路由數(shù)組。內(nèi)置路由中包含演示頁/:no按頁碼播放幻燈片、/presenter/:no、/overview、/print、/export/:no?等路徑以及一個(gè)通配 404 路由/:pathMatch(.*)*見 routes.ts。defineRoutesSetup的類型定義是RoutesSetup (routes: RouteRecordRaw[]) RouteRecordRaw[]見 setups.ts即函數(shù)接收當(dāng)前路由數(shù)組返回新的路由數(shù)組。路由記錄的寫法遵循 Vue Router 的RouteRecordRaw格式。操作步驟1. 創(chuàng)建 Vue 頁面組件在 目錄結(jié)構(gòu) 約定之外pages/目錄由你自己創(chuàng)建位置在項(xiàng)目根目錄。文檔示例中的導(dǎo)入路徑../pages/my-page.vue相對setup/目錄指向的就是根目錄下的pages/my-page.vue!-- pages/my-page.vue -- template h1My Page/h1 /template以上是最小示例內(nèi)容可替換為任何 Vue 單文件組件的寫法。2. 創(chuàng)建 setup/routes.ts按 Configure Routes 文檔 的用法在項(xiàng)目根目錄的setup/下創(chuàng)建routes.tsimport { defineRoutesSetup } from slidev/types export default defineRoutesSetup((routes) { return [ ...routes, { path: /my-page, component: () import(../pages/my-page.vue), }, ] })要點(diǎn)...routes展開保留全部內(nèi)置路由這是文檔給出的寫法刪掉它會(huì)破壞幻燈片等既有頁面path是你希望訪問的 URL 路徑component使用動(dòng)態(tài)導(dǎo)入指向 Vue 組件文件需要更多路由項(xiàng)時(shí)在數(shù)組中繼續(xù)按 Vue Router 路由記錄格式追加即可。3. 啟動(dòng)開發(fā)服務(wù)器并訪問新路徑在項(xiàng)目根目錄啟動(dòng)開發(fā)服務(wù)器package.json中通常已由腳手架配好dev腳本npm run dev然后使用終端輸出的本地地址訪問/my-page路徑。瀏覽器中顯示my-page.vue的渲染結(jié)果即表示自定義路由注冊成功。頁面打不開時(shí)檢查什么如果訪問/my-page落入 404 頁面對應(yīng)內(nèi)置的通配路由渲染packages/client/pages/404.vue說明自定義路由沒有進(jìn)入路由表按以下順序核對文件名與位置是否為項(xiàng)目根目錄setup/routes.ts——只匹配setup/routes.{ts,js,mts,mjs}這幾種后綴見 setups.ts改名成setup/router.ts之類的寫法不會(huì)被加載文件是否以export default導(dǎo)出一個(gè)返回路由數(shù)組的函數(shù)參數(shù)routes是否原樣展開進(jìn)了返回值component的動(dòng)態(tài)導(dǎo)入路徑相對于setup/目錄是否正確pages/my-page.vue文件是否真實(shí)存在。限制與邊界自定義頁面與幻燈片體系相互獨(dú)立它不進(jìn)slides.md的頁碼序列也不受 Markdown 幻燈片的 frontmatter 控制就是一個(gè)掛在 Vue Router 上的普通 Vue 組件路由沖突由 Vue Router 的路由規(guī)則決定文檔建議參考 Vue Router 官方文檔config-routes.md 末尾給出了指引。示例使用/my-page這樣的靜態(tài)路徑與內(nèi)置的動(dòng)態(tài)路徑/:no、404 通配路徑區(qū)分開避免歧義setup/routes.ts是可選文件不創(chuàng)建時(shí)一切按內(nèi)置路由運(yùn)行對現(xiàn)有幻燈片項(xiàng)目無影響。【免費(fèi)下載鏈接】slidevPresentation Slides for Developers項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slidev創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考