【Vue.js】Vue Router 之透過路由組件傳參數給元件

一般來說，想透過路由傳遞參數給元件，多採用動態路由的方式來實作，但這種方式一則容易使得元件高度耦合，導致只能在特定 URL 上使用；二則是你永遠別低估使用者亂輸入的能力，他們常常會輸入一些超乎設計者預期的字串 XD

因此，我希望可以找到其他方式傳參數給元件，最後終於在文件找到路由組件傳參的相關說明。不過它的說明有些簡略，還是稍微嘗試了下才找到我要的用法。

情境說明

嚴格來說，是因為我同時實作巢狀路由與路由組件傳參兩件事情，才使得事情變得有些複雜。

巢狀路由示意圖（圖片來源: Vue Router 官網）

我的情境有點像上圖，一個頁面中存在兩個元件，分別是外層的的 menu，與主體內容的 content 元件。

只是在我的應用中，兩個主體內容的 content 元件實作方式除了 Breadcrumbs 與 Title 不同外，其餘幾乎一樣。因此將他們合而為一，再使用一個標記來區分要顯示的 Breadcrumbs 與 Title，似乎是比較好的管理方法。

但因為是有限的標記選擇—不是 Profile 就是 Posts，再加上我也不希望讓使用者修改標記，畢竟若輸入不是這兩個標記時，也算標題與內文不符了 XDD，因此我直接排除常用的動態路由做法。

路由組件傳參

因為剔除動態路由的關係，使得我碰到了點瓶頸。還好後來在文件找到路由組件傳參，它可以通過 props 解耦，這正是我需要的。

根據文件，有三種方式可以透過 props 解耦

Boolean mode 布林模式

布林模式的用法是跟動態路由一併使用的，首先建立一個用來顯示的元件，並設定所需的 props：

<template>
  <div class="hello">
    <h1></h1>
    <h2>I form </h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    from: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      msg: 'Welcome'
    }
  }
}
</script>

接下來再 router/index.js 的檔案中，定義相關路由與一個動態路徑參數，最重要的是為你的命名視圖添加 `props` 選項並設置為True。

此路徑參數將直接傳遞給給該元件，需注意的是，此路徑參數需與元件中所要使用的 props 變數名稱相同，才能順利傳遞。

export default new Router({
  routes: [
    {
      path: '/:from',
      name: 'HelloWorld',
      props: true,
      component: HelloWorld
    }
  ]
})

若你的路徑參數與 props 變數名稱不相同，或是路徑參數多於 props 所定義的變數，這些無法被元件的 prop 所識別且獲取的特性，則可以在 vm.$attrs 中查看。

如果你的主視圖是巢狀路由架構，則為命名視圖所添加的 props 需配合 components 一同改成物件，其 key 值則對應到在主視圖中 router-view 的標籤所定義的名字。

當主視圖 template 如下：

<template>
  <div id="app">
    <router-view name="menu"/>
    <router-view name="content"/>
  </div>
</template>

則路由定義如下，在路由中定義的所有動態路徑參數，將會全數傳遞這兩個元件，若參數可被該元件的 prop 所識別且獲取，則會對應到 props 變數反之則會出現 vm.$attrs 中。

export default new Router({
  routes: [
    {
      path: '/:from/:id',
      name: 'HelloWorld',
      props: { menu: true, content: true},
      components: {
        menu: Menu,
        content: HelloWorld
      }
    }
  ]
})

若僅其中一個元件不需要接收 props，則可將將其布林模式設定為 False。

props: { menu: false, content: true},

Object mode 物件模式

若是你的應用情境不需要設定動態路由，或是像我一樣僅需傳送固定參數，則建議使用物件模式。

物件模式，顧名思義就是使用命名視圖中添加 props 選項來傳遞物件。且與布林模式一樣，若所傳遞的物件可被 prop 所識別，則會對應到 props 變數反之則會出現在 vm.$attrs 中：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      props: { from: "Taiwan"},
      component: HelloWorld
    }  
  ]
})

若是巢狀路由架構，則與布林模式一樣使用物件來為不同的 router-view 元件傳遞物件。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      props: { menu: {id:1}, content: { from: "Taiwan"}},
      components: {
        menu: Menu,
        content: HelloWorld
      }
    }
  ]
})

若是其中一個元件不需要接收 props，則可將其布林模式設定為 False，或是不將其加入 key 值。

props: { menu:false, content: { from: "Taiwan"}}

or

props: { content: { from: "Taiwan"}}

Function mode 函式模式

最後一個函式模式，顧名思義就是建立一個函式傳回 props。如此一來就可以將參數轉成你所需要的型態與名稱。

因為布林模式中 query 的值，是無法透過參數被傳入元件中的，因此這邊建立一個函式將 query 轉成物件傳入元件中。

export default new Router({
  routes: [
    {
      path: '/from',
      name: 'HelloWorld',
      props: (route) => ({ from: route.query.w }),
      component: HelloWorld
    }
  ]
})

以這組code 為例，如過在 URL 中輸入 /from?w=Taiwan，將會傳入 {from: 'Taiwan'}，交由元件的 prop 進行識別。

也可以透過函式將參數轉成你所需要的名稱

export default new Router({
  routes: [
    {
      path: '/:id',
      name: 'HelloWorld',
      props: (route) => ({ from: route.params.id }),
      component: HelloWorld
    }
    

巢狀路由架構的部分，一樣使用物件來為不同的 router-view 元件傳遞函式

export default new Router({
  routes: [
    {
      path: '/from',
      name: 'HelloWorld',
      props: { menu: (route) => ({ id: route.query.w }),
               content:  (route) => ({ from: route.query.w })
      },
      components: {
        menu: Menu,
        content: HelloWorld
      }
    }
  ]
})

關閉其中一個元件的 props，與前兩個模式一樣則將它設定為 False，或是不將其加入 key 值。

props: { menu:false, content: { from: "Taiwan"}}

or

props: { content: { from: "Taiwan"}}

情境說明

路由組件傳參

Boolean mode 布林模式

Object mode 物件模式

Function mode 函式模式

參考資料