Vue - 新增路由路徑及連結

  • 2092
  • 0
  • Vue
  • 2019-07-15

1.新增連結、並透過連結(router-link)切換路由

2.製作巢狀路由頁面

3.在component接收動態路由產生的參數(Random User Seeds API)

 

 

1.新增連結、並透過連結切換路由

在component 底下新增一個Folder:pages,並新增一個page.vue

內容的話到BS的網站找一個card的元件來使用

接下來修改/router/index.js

新增第二組的自訂分頁元件

以及第二組的routes

回到App.vue,在上面新增一組navbar,

傳統在navbar 裡面的連結都是透過<a>標籤來切換網頁

但是在這邊要使用 router-link 的標籤來切換,使用方法有分為兩種

(1) 使用to,後面接在/router/index.js 裡面routes定義的path // 網址後面對應的虛擬路徑

(2) binding to ,給一個屬性name,name的名稱對應到/router/index.js 裡面routes定義的name

這樣就可以透過 router 決定 <router-view> 是對應到哪一個component

2.製作巢狀路由頁面

將剛剛的page.vue拆開來,

把下圖中的

(1) 拆成parent.vue

(2) 分3個child.vue

parent.vue=>只留下最外層的div,裡面加上標籤 router-view

child.vue => 放原本page.vue的內容,但是最外層的div class="hello" 還是要保留

child2.vue、child3.vue 用相同的方式建置

修改 /router/index.js

最上面 import 剛剛新增的parent、child1~3 component

編輯routes

(1) 新增parent

(2) 新增屬性children,這個屬性裡面也是物件陣列,做法跟routes一樣

(3) 沒有輸入path 的話,預設會帶這一個component(ex: http://localhost:8080/#/parent/ )

(4) children 裡面的path,前面不需要加上斜線(加了會錯)

在parent.vue裡面可以透過加入router-link來做切換

3.在component接收動態路由產生的參數

在蘋果日報的新聞瀏覽的時候,可看到網址其實大同小異,

只有在最後的參數上有點差異,例如

上面網址路由最後的參數 應該是透過動態及時產生,

在component內如何取得這個參數(可使用參數再ajax去取得對應的資訊)

改寫上面範例的child3 

我在path的child3 後面加上 /:id

然後在child3的 component內新增created

透過 

this.$route.params.id

就可以取得路由傳進來的參數 id 

取得之後下面那一段是拿來測試用的

Random User這個網站有提供加上Seed參數的API

每次都傳入一樣的seed的話,可重複帶回相同的使用者資訊