Vue Router - 命名路由 & 命名視圖

竹白的 Vue 記事本目錄

命名路由

定義路由還可以使用 name 屬性來設置名稱：

1
2
3
4
5
6
7


routes: [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

to 特性使用 v-bind 來綁定一個物件傳入路由名稱和動態路由參數：

1

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

當路徑比較複雜的時候，使用命名路由代替，會是一個選擇。但要注意，path 和 name 不可以混用，path 會被無視。

假設要同一個頁面載入兩個以上的視圖，就需要替 <router-view> 元件命名。

1
2
3


<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

多個視圖就需要多個元件，因此路由設置需要改用 components：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


routes: [
  {
    path: '/',
    components: {
      default: Foo,
      a: Bar,
      b: Baz,
    }
  },
]

<router-view> 沒命名預設為 default，如果具名會渲染相對設定元件。