命名路由與多重視圖 (Named View)

這章我們要介紹兩個讓你的 Router 配置更強大、更靈活的功能。

---

一、 命名路由 (Named Routes)

在之前的範例中，我們在 <router-link> 或 push() 中都是寫死路徑字符串。

<router-link to="/user/123/profile">Profile</router-link>

這有一個壞處：萬一有一天你想把路徑從 /user/:id 改成 /member/:id，你需要搜尋整個專案去修改所有的連結。

解決方法是為路由取一個 唯一的 Name。

1. 定義 Name

const routes = [
  {
    path: "/user/:userId",
    name: "user", // 給它一個名字
    component: User,
  },
];

2. 使用 Name 導航

<!-- 不再寫死路徑 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}"> User </router-link>

router.push({ name: "user", params: { userId: 123 } });

這樣一來，無論你以後怎麼改 path，只要 name 不變，你的程式碼都不會壞。這是一種 解耦 (Decoupling) 的好習慣。

---

二、 命名視圖 (Named Views)

有些時候，你想要在同一個畫面中顯示多個並列的組件，而不是巢狀關係。

例如一個經典的 Dashboard：

• 頂部是 Topbar
• 左邊是 Sidebar
• 右邊是 MainContent

它們是並列的，不適合用巢狀路由。這時我們可以用 命名視圖。

1. Template 配置

給 <router-view> 加名字。沒有名字的預設是 default。

<div class="layout">
  <router-view name="topbar" class="top" />

  <div class="main-body">
    <router-view name="sidebar" class="side" />
    <router-view class="main" />
    <!-- 預設 default -->
  </div>
</div>

2. Router 配置

原本 component 屬性要改成 components (複數)，並且是一個物件。

const routes = [
  {
    path: "/dashboard",
    components: {
      default: DashboardMain, // 對應無名 view
      sidebar: SidebarMenu, // 對應 name="sidebar"
      topbar: TopHeader, // 對應 name="topbar"
    },
  },
];

這樣當使用者訪問 /dashboard 時，這三個組件會同時渲染在各自的位置上。

---

三、 別名 (Alias) vs 重定向 (Redirect)

這是兩個容易搞混的概念，雖然它們都能讓不同的 URL 顯示同樣的內容。

1. 重定向 (Redirect)

當訪問 /a 時，網址會自動變成 /b，然後渲染 B 頁面。

const routes = [{ path: "/a", redirect: "/b" }];

2. 別名 (Alias)

當訪問 /a 時，網址保持 /a，但渲染的內容跟 /b 一樣。

const routes = [{ path: "/b", component: B, alias: "/a" }];

適用場景：

• Redirect: 舊網址遷移，或未登入跳轉。
• Alias: 讓首頁 (/) 同時也是 Dashboard (/dashboard)，但你想保留兩個入口。

---

總結

1. 養成習慣使用 name 來導航，避免寫死路徑。
2. 使用 命名視圖 (components) 來處理複雜的並列佈局。
3. 區分 Redirect (跳轉) 與 Alias (別名) 的用途。

下一章，我們將進入 Vue Router 最重要的功能之一，也是保護你應用程式的第一道防線：導航守衛。

下一章：導航守衛 (Navigation Guards)