請啟用 Javascript 查看內容

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

 ·  ☕ 1 分鐘

竹白的 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>

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

CodePen Demo:Vue 2.x - 命名路由

命名視圖

假設要同一個頁面載入兩個以上的視圖,就需要替 <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,如果具名會渲染相對設定元件。

CodePen Demo:Vue 2.x - 命名視圖


竹白
作者
竹白
前端筆記

文章目錄