Redirect 與 beforeEach 導覽守衛

在 Vue 3 專案中設定路由重新導向與導頁前檢查（登入驗證、權限控制）的實用寫法。

Redirect（重新導向）

在 Vue 3 使用 Vue Router 時，若要在進入某路徑時自動導向另一個路徑，可在 routes 設定裡使用 redirect 屬性。

以下為基本範例：

// router/index.js 或 router.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    redirect: '/home' // 將根路徑導向到 /home
  },
  {
    path: '/home',
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/home' // 捕捉所有未定義的路由並導回 /home
  }
]

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

export default router

說明：

• redirect: '/home'：當使用者訪問 / 時，會自動導向 /home。
• /:pathMatch(.*)*：Vue Router 4 的萬用匹配（catch-all route），用來處理 404 或未定義的路由，可統一導回首頁或自訂 404 頁。

beforeEach（全域導覽守衛）

在 Vue 3 使用 Vue Router 的 beforeEach 守衛，可在每次導頁前執行檢查，例如：驗證是否登入、依權限限制頁面存取等。

基本寫法範例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('@/views/LoginView.vue')
  },
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardView.vue'),
    meta: { requiresAuth: true } // 自訂 meta 欄位
  }
]

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

// 設定全域 beforeEach 導覽守衛
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('token') // 假設用 token 判斷登入狀態

  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login') // 未登入，導向 login
  } else {
    next() // 放行
  }
})

export default router

說明：

• to.meta.requiresAuth：用 meta 欄位標記需要登入的路由，守衛內依此判斷是否放行。
• next()：繼續前往下一個導航。
• next('/login')：中斷原導航並導向指定路由（此例為登入頁）。