命名路由

STEP 1:加入命名的路由

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

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

App.vue

<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

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

新增的 menu.vue

<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

export default new VueRouter({
  routes: [
    {
      name: '首頁',
      path: '/index',
      component: Home,
    },
    {
      // name: '分頁',
      path: '/page',
      // 載入多個元件
      // component: Page,
      components: {
        default: Page,
        menu: Menu,
      },
      children: [
        // omit
      ],
    },
  ],
});

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