tags: Vue.js ItIron2020

前言

昨天我們介紹了vue-router的基本使用，包含安裝、基本設定、router-view & router-link的介紹以及如何實現不同頁面切換，我們也知道了你可以透過name 或是 path去決定router-view要渲染的組件! 今天我們則要繼續探討vue-router的一些使用，讓我們就馬上開始吧!

動態路由設計

Params

router自然也支援動態路由的設計，想像一下今天有個頁面是要顯示使用者1的資料，那整個url可能就會類似這樣 localhost:8080/users/1
那你對應的設計就會類似以下

{
  path: '/users/:id',
  name: 'User',
  component: User,
},

你可以以:param表示動態變化的params，冒號後的參數可以自由命名，而你可以利用產出的$router實體取得該參數的值，如下方的寫法

// 假設url為localhost:8080/users/1

this.$router.params.id => 1

有時候你也會碰到參數可加可不加的情況，那此時就可以利用"?"來達到這樣的效果

{
  path: '/users/:id?',
  name: 'User',
  component: User,
},

在這樣的情況下，id這個參數就可有可無，localhost:8080/users仍然會順利匹配到User組件。

了解params的概念後，你在之前的router-link就可以帶入參數來處理

<router-link
  :to="{
    name: 'User',
    params: {
      id: 1
    }
  }"
>
  User1
</router-link>

query

有寫過後端endpoint的朋友對於query string想必都不會太陌生，講白話點就是你url問號後方的部分，舉個例子來說

localhost:8080/users?genger=male&age=25

genger=male&age=25這一串我們就稱為query string，你在vue中則可以透過以下的語法取得query string的值

// 假設url為localhost:8080/users?genger=male&age=25
this.$route.query => { gender:'male', age: '25'}

最後你會收到一個物件包含著所有query的值，特別注意的是收到的資料一律以字串方式表現，要計算的話需要額外的處理~!

別名(alias)

在routes的部分也可以加入別名的設計，以陣列的方式傳入別名，若path中有匹配到任何一個別名，就仍會顯示對應的頁面

{
    path: '/',
    name: 'Home',
    alias:['home','homepage'],
    component: Home,
}

在上方的範例中，localhost:8080/、localhost:8080/home、localhost:8080/homepage 都會顯示Home組件的內容。

重新導向(redirect)

vue-router也提供了重新導向的功能，在route中加入redirect屬性就可以重新導向對應的頁面，其中包括了path的寫法

{
    path: '/',
    name: 'Home',
    alias: ['home', 'homepage'],
    component: Home,
    redirect: '/about'
},

以及命名的寫法

{
    path: '/',
    name: 'Home',
    alias: ['home', 'homepage'],
    component: Home,
    redirect: About
},

也可以用物件的方式傳入

{
    path: '/',
    name: 'Home',
    alias: ['home', 'homepage'],
    component: Home,
    redirect: {
      About
    }
},

甚至用函數的方式去寫也行~! 非常的自由!

{
    path: '/',
    name: 'Home',
    alias: ['home', 'homepage'],
    component: Home,
    redirect: from => return '/'
  },

Mode切換

vue-router中提供了三種不同的mode，分別是history、hash & abstract，你可以在router/index.js最下方的部分找到對應的程式碼做mode的切換。

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

history mode

history mode看起來就是與hash mode差了一個#字號，實際上我們當然希望網址列乾乾淨淨，但在後端部分需要做額外的處理，將頁面導為指定的index.html檔案，若後端無法處理的話建議還是先暫時用hash mode來處理。

hash mode(預設)

hash mode的特色為你的url中會有一個#字號，例如localhost:8080/#/users，#雖然會包含在你的url中，但向後端發送請求時並不會包含在HTTP request中。至於為什麼要這麼麻煩加入#，想像一下今天有個url是user/1，在測試環境時自然沒有什麼問題，但如果是在發布的情況時，它會去user資料夾找1這個檔案，為了避免這樣的情況發生，所以我們需要藉由#模擬路由的效果。

abstract mode

以上兩個模式其實都是基於瀏覽器的API實作，若系統偵測到你並沒有處在瀏覽器環境時，就會自動改為abstract mode。

以上的說明若覺得不夠清楚，可以參考官方文件的說法!

自訂路由切換

$router實體中有許多的屬性、事件可以讓我們使用，其中路由的切換應該是最常用的方法之一了，以下是幾個我自己有在用的方法

• router.push('對應的path')

你在組件中可以自由的使用this.$router.push去切換不同的頁面，值得注意的是這樣的頁面切換其實並不會重整頁面，這種情況在部分需要刷新畫面時會需要額外的處理。

• router.forward() & router.back()

類似於windows中上下一頁的用法，可以藉由這樣快速往返上下頁。

• router.go()

與上方的用法類似，差別在於router.go可以傳入數字讓你更為彈性的使用。

this.$router.go(2) 下兩頁
this.$router.go(-1) 上一頁
this.$router.go(0) 頁面重整
this.$router.go(1000) 不存在，則爆錯

結語

今天我們將router剩餘的幾個部分做了簡單的收尾，至此你們已經掌握了很大一部分的vue基本用法，接著我們就會進入另一個專案的實作階段:D 敬請期待~!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D