npm install vue-router@next

src/
├── router/
│   └── index.js  # 路由主文件
└── views/        # 路由組件目錄

import { createRouter, createWebHistory } from 'vue-router'
// 1. 導(dǎo)入路由組件（推薦懶加載）
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
// 2. 定義路由規(guī)則
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首頁(yè)' }  // 路由元信息
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '關(guān)于我們' }
  }
]
// 3. 創(chuàng)建路由實(shí)例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // 使用History模式
  routes,
  scrollBehavior(to, from, savedPosition) {  // 滾動(dòng)行為控制
    return savedPosition || { top: 0 }
  }
})
// 4. 全局路由守衛(wèi)示例
router.beforeEach((to, from) => {
  document.title = to.meta.title || '默認(rèn)標(biāo)題'
})
export default router

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 class="app-container">
    <nav class="global-nav">
      <router-link 
        to="/" 
        active-class="active-link"
        exact
      >首頁(yè)</router-link>
      <router-link 
        :to="{ name: 'About' }"
        custom
        v-slot="{ navigate }"
      >
        <button @click="navigate">關(guān)于我們</button>
      </router-link>
    </nav>
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<style>
.active-link {
  color: #42b983;
  font-weight: bold;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

// 在組合式API中使用
import { useRouter } from 'vue-router'
const router = useRouter()
// 字符串路徑
router.push('/about')
// 帶參數(shù)的對(duì)象形式
router.push({ path: '/user/123' })
// 命名路由+參數(shù)
router.push({ 
  name: 'User',
  params: { id: 123 }
})
// 替換當(dāng)前路由（無(wú)歷史記錄）
router.replace('/login')
// 前進(jìn)/后退
router.go(1)  // 前進(jìn)1步
router.back() // 等同于 router.go(-1)

{
  path: '/user/:id',
  name: 'User',
  component: () => import('@/views/User.vue')
}

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)  // 輸出URL中的id值

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
];

// 全局前置守衛(wèi)
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { path: '/login' }
  }
})
// 路由獨(dú)享守衛(wèi)
{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from) => {
    // 權(quán)限校驗(yàn)邏輯
  }
}
// 組件內(nèi)守衛(wèi)
onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('確定要離開(kāi)嗎？')
  if (!answer) return false
})

const User = () => import(/* webpackChunkName: "user" */ '@/views/User.vue')

// 在用戶hover導(dǎo)航鏈接時(shí)預(yù)加載
<router-link 
  to="/about" 
  @mouseenter="preloadAbout"
></router-link>
<script setup>
const preloadAbout = () => {
  import('@/views/About.vue')
}
</script>

dist/
├── js/
│   ├── main.js
│   ├── home.js     # 首頁(yè)路由代碼
│   └── about.js    # About頁(yè)路由代碼

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

watch(
  () => route.params.id,
  (newId) => {
    // 重新獲取數(shù)據(jù)
  }
)

{
  path: '/:pathMatch(.*)*',
  redirect: '/404'
}

import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [...]