這篇筆記介紹如何透過 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"> <router-view name="menu"></router-view> <div class="container"> <router-view></router-view> </div> </div> </template>
|
我們要把原本 page.vue 裡的內容拆開,把上方的連結移到 menu.vue。
被縮水的 page.vue
1 2 3 4 5 6 7 8
| <template> <div class="hello"> <div class="card" style="width: 18rem;"> <router-view></router-view> </div> </div> </template>
|
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:配置路由,載入多個元件
- 在 index.js 中載入 menu.vue:
import Menu from '@/components/pages/menu'
- 用
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, }, { path: '/page', components: { default: Page, menu: Menu, }, children: [ ], }, ], });
|
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。