從前端路由開始：用 Vue Router 打造流暢單頁應用導航實戰指南

你寫的 Vue 3 單頁應用（SPA），明明只是點了一下選單，網頁卻「瞬間」換了內容、網址也跟著變，瀏覽器完全沒有重新整理——這背後默默幹活的就是前端路由（Frontend Routing）。對 CSF 這類大型後台來說，資產管理、告警管理、日誌檢索各是一個「頁面」，卻共享同一套框架與登入狀態，靠的就是路由在編排。本文用 Vue Router 4 手把手帶你從零搭出一套流暢的導航系統。

一、先搞懂路由在管什麼

傳統多頁網站每次點連結，瀏覽器都向伺服器要一整份新 HTML；SPA 則只在第一次載入時拿回框架，之後的「換頁」都由前端攔截網址變化、就地替換畫面。Vue Router 的核心職責有三：把網址對應到元件、在 <router-view> 渲染對應畫面、提供 <router-link> 做不刷新的導航。它還支援 history 模式（網址乾淨，像 /alarm/list 而非 /#/alarm/list）。

二、步驟 1：安裝並建立路由實例

先安裝依賴，再建立一個 router 實例，指定路由表與歷史模式：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  { path: '/', name: 'home', component: Home },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

三、步驟 2：定義路由表並做元件懶加載

大型後台幾十個頁面若全部一次性載入，首屏會很慢。重點：用動態 import() 做路由級程式碼分割，瀏覽器只在使用者真正進入該頁時才下載對應 chunk：

const routes = [
  {
    path: '/alarm/list',
    name: 'alarmList',
    component: () => import('@/views/alarm/index.vue'),
  },
  {
    path: '/log/retrieval',
    name: 'logRetrieval',
    component: () => import('@/views/logretrieval/index.vue'),
  },
]

四、步驟 3：掛載路由並放置渲染出口

在 main.ts 註冊路由，並在 App.vue 擺上 <router-view> 做為畫面出口：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

<!-- App.vue -->
<template>
  <router-view />
</template>

五、步驟 4：動態路由與程式化導航

資產詳情頁常見 /asset/:id 這類動態參數。元件內用 useRoute() 取參數、用 useRouter() 做程式化跳轉：

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.params.id)          // 取動態參數
router.push({ name: 'alarmList' })    // 程式化導航

六、用導航守衛做權限控制

CSF 這類後台離不開權限。Vue Router 的 beforeEach 守衛可在進入頁面前攔截，搭配 usePermission 判斷角色，恰好呼應你們既有的 v-auth 指令：

router.beforeEach((to, from, next) => {
  const permission = usePermission()
  if (to.meta.requiresAuth && !permission.hasPermission(to.meta.perm)) {
    next({ name: '403' })
  } else {
    next()
  }
})

特別注意：history 模式部署到 Nginx / IIS 時，必須設定「所有路徑都 fallback 到 index.html」，否則使用者重新整理深層網址會直接 404。這在 CSF 的 Nginx 配置與 13zn.com 的 web.config 重寫規則裡都要對齊。

重點回顧：路由表決定網址與元件的對應；import() 懶加載是大型應用的效能命脈；beforeEach 守衛把權限收口在前端第一道關卡。把這三件事做對，导航體驗就能既快又穩。

互動話題：你在專案裡是怎麼管理幾十個路由的？會用自動掃描 views 資料夾生成路由表嗎？歡迎留言分享你的做法！