[Vue] 跟著Vue 闖盪前端世界- 08 網站路由vue | vue-router教學
先前的介紹都針對單頁面功能進行說明,但網站是透過許多頁面組件相疊而成,需要一個規則讓用戶訪問到確切目標,本篇就針對vue-router路由設定進行介紹。前言我們可以透過vue-router的設定檔來定義整體網站的路由規則,利用router-view來定位子路由組件渲染的出口,並可允許訂定多組具名router-view來一次顯示多個子組件於單一子路由中。以下說明。 概念描述假設目前的網站規劃有個login頁面,以及登入後首頁home及其他功能頁features,而登入後首頁home又包含三個子路由頁面A,B與C組件;這就像個樹狀結構是有父子關係存在的,而父路由...
先前的介紹都針對單頁面功能進行說明,但網站是透過許多頁面組件相疊而成,需要一個規則讓用戶訪問到確切目標,本篇就針對 vue-router 路由設定進行介紹。
前言我們可以透過 vue-router 的設定檔來定義整體網站的路由規則,利用 router-view 來定位子路由組件渲染的出口,並可允許訂定多組具名 router-view 來一次顯示多個子組件於單一子路由中。以下說明。
概念描述
假設目前的網站規劃有個 login 頁面,以及登入後首頁 home 及其他功能頁 features ,而登入後首頁 home 又包含三個子路由頁面 A, B 與 C 組件;這就像個樹狀結構是有父子關係存在的,而父路由組件中會包含 router-view 作為子路由組件的渲染出口(如是意圖中藍色及黃色虛線區塊),而這些路由規則 (ex. 路由符合 /login 時會載入 Login.vue 組件到父層 App.vue 的 router-view 中) 都會明確定義在 router 設定中。
實際 Router 設定如下,會與上圖的動線設計有對應階層關係。
視圖 router-view
視圖簡單的作用就是在符合路由規則的情境下,把指定路由組件取代父層組件中的視圖;而整個應用程式的第一個視圖就是在 App.vue 檔案中,也就表示在 vue-router 設定中的第一層路由組件在匹配情境下,會直接取代 App.vue 中 router-view 元素。
視圖一般沒有特別需求都不會給予名稱,也就是預設要被取代的視圖;但有時候會需要依照路由情境,切分數個視圖才可符合各情境下各自顯示的邏輯畫面,此時可以透過設定 name 名稱來進行區別。後續再談論 router 設定的時候,就可以指定特定組件呈現在特定視圖上。
路由 vue-router
先前有提到路由是有皆層性的,因此第一層輸出組...