Vue 初心者筆記 #32 使用命名路由在同一路徑載入多個元件

發表於 分類於

這篇筆記介紹如何透過 Vue Router 的命名路由，讓同一個路徑可以載入多個頁面元件。
其實這篇筆記的內容，我覺得可以加到之前的文章後面就好，但是加上去的話那一篇會太長，因此只好另外再開一篇了。

命名路由

STEP 1：加入命名的路由

在 App.vue 中，如果想再加入另外一個元件，可以使用命名路由。

下方的 X-Template 有兩個 <router-view></router-view>，其中沒有設定 name 的就會是預設的 <router-view>。

App.vue

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div id="app">
    <!-- ...omit -->
    <!-- 想再加入另外一個選單 -->
    <router-view name="menu"></router-view>
    <div class="container">
      <!-- 沒有設定 name 的就是預設的 router-view -->
      <router-view></router-view>
    </div>
  </div>
</template>

STEP 2：製作 menu.vue 元件

我們要把原本 page.vue 裡的內容拆開，把上方的連結移到 menu.vue。

被縮水的 page.vue

1
2
3
4
5
6
7
8
<template>
  <div class="hello">
    <!-- 這裡的三個連結移到 menu.vue 嚕 -->
    <div class="card" style="width: 18rem;">
      <router-view></router-view>
    </div>
  </div>
</template>

新增的 menu.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div class="hello my-3">
    <ul class="nav">
      <li class="nav-item">
        <router-link class="nav-link" to="/page/">卡片 1</router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-link" to="/page/child2">卡片 2</router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-link" to="/page/child3">卡片 3</router-link>
      </li>
    </ul>
  </div>
</template>

STEP 3：配置路由，載入多個元件

  1. 在 index.js 中載入 menu.vue：import Menu from '@/components/pages/menu'
  2. 用 components 載入多個元件（依據定義的名稱，依序載入元件）

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default new VueRouter({
  routes: [
    {
      name: '首頁',
      path: '/index',
      component: Home,
    },
    {
      // name: '分頁',
      path: '/page',
      // 載入多個元件
      // component: Page,
      components: {
        default: Page,
        menu: Menu,
      },
      children: [
        // omit
      ],
    },
  ],
});

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。