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

// src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

// 1. 定義路由配置
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue') // 使用懶加載
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/AboutView.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/UserView.vue'),
    props: true // 將路由參數(shù)作為 props 傳遞給組件
  }
]

// 2. 創(chuàng)建路由實例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes
})

export default router

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

const app = createApp(App)
app.use(router) // 掛載路由插件
app.mount('#app')

<template>
  <div>
    <nav>
      <router-link to="/">首頁</router-link>
      <router-link to="/about">關于</router-link>
      <router-link :to="{ name: 'User', params: { id: 123 }}">用戶頁面</router-link>
    </nav>

    <!-- 路由出口：匹配到的組件將在此渲染 -->
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'

// 獲取路由實例和當前路由對象
const router = useRouter()
const route = useRoute()

// 編程式導航（通過代碼跳轉）
const goToAbout = () => {
  router.push('/about')
  // 或者使用命名路由
  // router.push({ name: 'About' })
}

// 帶參數(shù)的跳轉
const goToUser = (id: number) => {
  router.push({ name: 'User', params: { id } })
}

// 替換當前路由（不會在瀏覽器歷史中留下記錄）
const replaceRoute = () => {
  router.replace('/about')
}

// 前進后退
const goBack = () => router.go(-1)
const goForward = () => router.go(1)
</script>

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes' // 路由配置單獨管理
import NProgress from 'nprogress'

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

/**
 * 全局前置守衛(wèi)
 * 作用：在每次路由跳轉前執(zhí)行，用于控制訪問權限、設置頁面標題、開啟進度條等。
 */
router.beforeEach((_to, _from, next) => {
  NProgress.start() // 開啟頁面頂部進度條
  // 這里可以做權限驗證，例如檢查 token 是否存在
  // if (to.meta.requiresAuth && !isLoggedIn) { next('/login') }
  // else { next() }
  next()
})

/**
 * 全局后置守衛(wèi)
 * 作用：在路由跳轉完成后執(zhí)行，用于關閉進度條、埋點上報等。
 */
router.afterEach(() => {
  NProgress.done() // 關閉進度條
})

export default router

// src/router/routes.ts
import { type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/index',
    name: 'index',
    component: () => import('../components/Homepage.vue'),
    meta: { keepAlive: true }, // 自定義元數(shù)據(jù)
    children: [
      {
        path: 'article',
        name: 'article',
        component: () => import('../views/page/article/index.vue')
      }
    ]
  },
  {
    path: '/',
    redirect: { name: 'index' } // 重定向
  }
]

export default routes

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <!-- 當路由的 meta 中 keepAlive 為 true 時，緩存組件 -->
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <!-- 否則不緩存 -->
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { watch } from 'vue'

const route = useRoute()

// 監(jiān)聽路由參數(shù)的變化
watch(() => route.params.id, (newId, oldId) => {
  console.log('用戶 ID 從', oldId, '變?yōu)?, newId)
  // 在這里調用獲取用戶詳情數(shù)據(jù)的 API
})
</script>