[Vue] 跟著Vue 闖蕩前端世界 | vue router link
vue-router為了方便我們連結特定路由,因此提供router-link組件供我們使用;其原理就是透過設置,將這些傳入的path或路由名稱轉換為a元素,並且在路由匹配時給予 router-link-activeclass於元素中,標記目前正在該連結點中。前言本篇將透過router-link方便的連結功能串起整個網站頁面相連性。 使用router-link產生路由連結vue-router為了方便我們連結特定路由,因此提供router-link組件供我們使用;其原理就是透過設置,將這些傳入的path或路由名稱轉換為a元素,並且在路由匹配時給予 router-link-activeclass於元素中,標記目前正在...
vue-router 為了方便我們連結特定路由,因此提供 router-link 組件供我們使用;其原理就是透過設置,將這些傳入的 path 或路由名稱轉換為 a 元素,並且在路由匹配時給予 router-link-active class 於元素中,標記目前正在該連結點中。
前言本篇將透過 router-link 方便的連結功能串起整個網站頁面相連性。
使用 router-link 產生路由連結
vue-router 為了方便我們連結特定路由,因此提供 router-link 組件供我們使用;其原理就是透過設置,將這些傳入的 path 或 路由名稱轉換為 a 元素,並且在路由匹配時給予 router-link-active class 於元素中,標記目前正在該連結點中。基本操作如下:
依據 路徑 來進行路由匹配 依據 名稱 直接跳轉到特定路由 傳遞參數至動態路由 - 依據 路徑 + URL資料 (router 設定為 path: /home/introBranch/:branchName) 傳遞參數至動態路由 - 依據 名稱 + Params資料 (router 設定為 path: /home/introBranch/:branchName, name: introBranch) 調整預設匹配連結的 class 名稱路由匹配時預設會給予 router-link-active class 於元素中,用來標示目前位置;但如果系統已經有預定的樣式(ex. active),我們可以透過單個元素設定或全域設定來調整。
調整個別元素
全域調整
調整後當路由與 Home Link 設定匹配後,就會套入 Active 於這個連結中,產生不同樣式的畫面效果輸出。
使用 exact 匹配模式先前...