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
],
},
],
});

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