npm install vue-router@4
# 或 yarn add vue-router@4

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'
 
const routes = [
  // 路由配置將在這里添加
]
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // History 模式（推薦）
  // history: createWebHashHistory(), // Hash 模式（無需后端配置）
  routes
})
 
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

const routes = [
  // 訪問根路徑 "/" 時，重定向到 "/home"
  { path: '/', redirect: '/home' },
  // 訪問舊路徑 "/old-login" 時，重定向到新路徑 "/login"（兼容舊鏈接）
  { path: '/old-login', redirect: '/login' },
  // 正常路由配置
  { path: '/home', component: Home },
  { path: '/login', component: Login }
]

const routes = [
  { 
    path: '/', 
    redirect: { name: 'Home' } // 指向路由名 "Home"
  },
  { 
    path: '/home', 
    name: 'Home', // 定義路由名
    component: Home 
  },
  { 
    path: '/dashboard', 
    name: 'Dashboard', 
    component: Dashboard 
  }
]

const routes = [
  {
    path: '/',
    // 函數(shù)參數(shù) to：當前訪問的路由對象（含 params/query 等）
    redirect: (to) => {
      // 示例：根據(jù)本地存儲判斷登錄狀態(tài)
      const isLogin = localStorage.getItem('token')
      if (isLogin) {
        return { name: 'Dashboard' } // 已登錄跳控制臺
      } else {
        return '/login' // 未登錄跳登錄頁
      }
    }
  },
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard }
]

<!-- Login.vue -->
<template>
  <div>
    <h1>登錄頁</h1>
    <button @click="handleLogin">登錄</button>
  </div>
</template>
 
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() // 獲取路由實例
 
const handleLogin = async () => {
  // 模擬登錄接口請求
  const loginSuccess = await mockLoginApi()
  
  if (loginSuccess) {
    // 方式1：跳轉到路徑（帶 query 參數(shù)）
    router.push('/dashboard?tab=1')
    
    // 方式2：跳轉到路由名（帶 params 參數(shù)，需路由配置占位符）
    // router.push({ name: 'Dashboard', params: { id: 1 }, query: { tab: 1 } })
    
    // 方式3：replace 跳轉（不添加歷史記錄，無法回退到當前頁）
    // router.replace('/dashboard')
  }
}
 
// 模擬登錄接口
const mockLoginApi = () => Promise.resolve(true)
</script>

<script>
export default {
  methods: {
    handleLogin() {
      this.$router.push('/dashboard') // 等同于 setup 中的 router.push
    }
  }
}
</script>

// router/index.js
router.beforeEach((to, from, next) => {
  // to：即將跳轉的目標路由
  // from：當前離開的路由
  // next：Vue Router 3 寫法（Vue Router 4 可直接 return 路由對象，無需 next）
  
  const token = localStorage.getItem('token') // 獲取登錄態(tài)
  const whiteList = ['/login', '/register'] // 白名單（無需登錄可訪問）
  
  // 邏輯：未登錄且目標路由不在白名單 → 重定向到登錄頁
  if (!token && !whiteList.includes(to.path)) {
    // Vue Router 4 推薦寫法：直接 return 目標路由
    return { path: '/login', query: { redirect: to.path } } 
    // 攜帶 redirect 參數(shù)，登錄成功后可跳回原目標頁（見下文示例）
  }
  
  // 允許跳轉（Vue Router 4 中可省略，默認放行）
  return true
})

<!-- Login.vue -->
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute() // 獲取當前路由參數(shù)
 
const handleLogin = async () => {
  const loginSuccess = await mockLoginApi()
  if (loginSuccess) {
    // 獲取 redirect 參數(shù)（若有則跳回原頁面，無則跳首頁）
    const redirectPath = route.query.redirect || '/dashboard'
    router.push(redirectPath)
  }
}
</script>

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    // 路由獨享守衛(wèi)：僅訪問該路由時觸發(fā)
    beforeEnter: (to, from) => {
      const token = localStorage.getItem('token')
      if (!token) {
        return '/login' // 未登錄 → 重定向到登錄頁
      }
    }
  }
]

<!-- Dashboard.vue -->
<script setup>
import { onBeforeRouteEnter } from 'vue-router'
import { ElMessage } from 'element-plus' // 示例：UI 組件提示
 
// 組件內守衛(wèi)：進入該組件前觸發(fā)
onBeforeRouteEnter((to, from) => {
  const role = localStorage.getItem('role') // 獲取用戶角色
  // 邏輯：僅管理員可訪問，普通用戶重定向到首頁
  if (role !== 'admin') {
    ElMessage.warning('無權限訪問，已跳轉首頁')
    return '/' // 重定向到首頁
  }
})
</script>

const routes = [
  // 其他路由...
  { path: '/404', component: () => import('@/views/404.vue') },
  // 通配符路由（必須放在最后）：匹配所有未定義的路由
  { path: '/:pathMatch(.*)*', redirect: '/404' } 
  // 或直接重定向到首頁：{ path: '/:pathMatch(.*)*', redirect: '/' }
]

// 1. 路由配置中帶參數(shù)
{ path: '/old-user', redirect: { name: 'User', params: { id: 1 }, query: { type: 'old' } } }
 
// 2. 編程式導航帶參數(shù)
router.push({ 
  name: 'User', 
  params: { id: 1 }, // 路徑參數(shù)（需路由配置占位符：/user/:id）
  query: { type: 'old' } // 查詢參數(shù)（拼接在路徑后：?type=old）
})

location / {
  try_files $uri $uri/ /index.html;
}