[指南] Vue-Router 的巢狀路由和 Empty View 妙用 @地瓜大的飛翔旅程

章節連結

觀念
步驟
參考資料

Vue Router 是使用 Vue 框架的開發者，常會搭配使用的前端路由套件。若依照一般路由的規劃層狀結構習慣，如 view/azure/dashboard ，當中間的結構並沒有對應內容，可以用 Empty View 的方法來進行跳轉。這篇筆記下使用方法和重點設定。

觀念

由於每一次的跳轉，父層都需要有個 <router-view /> 的標籤才行。這點可以透過創造一個空的 EmptyRouterView.vue 檔，內容僅含一個 <router-view /> 即可

步驟

1. 新增一個 EmptyRouterView.vue

<template>
  <router-view></router-view>
</template>

<router-view></router-view>

</template>

2. route 的路徑規劃範例如下：

// 當載入 /aws 下面的網址時，預設會跳轉到 /aws/home
// 若輸入 /aws/about，會跳轉到 /aws/about
{
        path: '/aws',
        component: EmptyRouterView,
        redirect: '/aws/home',
        children: [
            {
              name: 'Home',
              path: 'home',
              component: () => import('../views/Index.vue')
            },
            {
              name: 'About',
              path: 'about',
              component: () => import('../views/About.vue')
            }
        ]
}