單頁式應用
single-page application,縮寫 SPA
透過 JS 動態渲染當前頁面來與使用者互動,而非傳統的從伺服器重新載入整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗,使應用程式更像一個桌面應用程式。
router-view
將會改變的區塊使用 router-view 顯示
App.vue
1 | <header /> |
設定路由
將 Home、404 頁面直接一進入就 import,其他頁面使用動態 import 組件,點擊該頁面時,才會載入組件。
動態 import 組件 build 時每個頁面會是一支獨立的 JS。
如全部頁面直接一進入就 import,頁面一多時會影響效能; 但如果是小專案,頁面很少時,可以直接全部 import,減少 request 的數量。
大網站 => 動態載入,不吃效能
小網站 => 直接載入,減少 request 數量
router index.js
1 | import { createRouter, createWebHistory } from "vue-router"; |
router 例外處理(404)
{ path: “/:pathMatch(.*)”, component: NotFoundComponent }
404 頁面的 path 需放最下面,載入時會從上到下開始跑,上面的 path 都沒有 Match 時即會顯示此頁面
History modes
createWebHashHistory()
會透過 # 字號來當作網址切換的操作,但是會跟錨點相撞,對 SEO 有不利的影響
createWebHistory()
需要跟後端搭配重新配置根目錄下的 router,還要自己配置例外處理的頁面例如 404 等
router-link
設定 router-link 指向連結頁面
header.vue
1 | <router-link to="/rwd">RWD</router-link> |
以上是我的學習筆記,希望也有幫助到你哦 😀
Hey!想學習更多前端知識嗎?
最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈無論您是 0 基礎新手,又或是想學 RWD 的初學者,
我們將帶你從零開始,深入了解並掌握 RWD 響應式網頁設計的核心技術,快來一起看看吧 😊