npm install vue-router@4

// src/router/index.js
// 1. 導(dǎo)入必要的函數(shù)和組件
import { createRouter, createWebHistory } from 'vue-router'
// 2. 導(dǎo)入你希望成為“頁面”的Vue組件
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

// 3. 定義路由規(guī)則數(shù)組
const routes = [
  {
    path: '/', // 當(dāng)瀏覽器地址是根路徑時
    name: 'home', // 給路由起個名字，方便跳轉(zhuǎn)
    component: HomeView // 顯示HomeView這個組件
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

// 4. 創(chuàng)建路由實例
const router = createRouter({
  // 使用HTML5的歷史模式，URL看起來更干凈（比如 /about）
  // 另一種模式是 createWebHashHistory，URL會帶#號
  history: createWebHistory(),
  routes // 簡寫，等同于 routes: routes
})

// 5. 導(dǎo)出這個實例，在main.js中會用到
export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 導(dǎo)入我們剛才創(chuàng)建的路由實例
import router from './router'

const app = createApp(App)

// 使用路由插件
app.use(router)

app.mount('#app')

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <!-- 使用 router-link 組件進行導(dǎo)航，它會被渲染成一個 <a> 標簽 -->
      <router-link to="/">首頁</router-link> |
      <router-link to="/about">關(guān)于</router-link>
    </nav>
    <!-- 路由匹配到的組件將在這里被渲染，這就是那個“插座” -->
    <router-view />
  </div>
</template>

<template>
  <!-- 使用‘to'屬性指定目標地址，可以是字符串路徑，也可以是路由對象 -->
  <router-link to="/about">去關(guān)于頁面</router-link>

  <!-- 更推薦使用命名路由，這樣即使你改了path路徑，這里的鏈接也不用改 -->
  <router-link :to="{ name: 'home' }">返回首頁</router-link>

  <!-- 甚至可以帶參數(shù) -->
  <router-link :to="{ name: 'user', params: { id: 123 } }">查看用戶123</router-link>
</template>

<script>
// 選項式 API 寫法
export default {
  methods: {
    goToAboutPage() {
      // 和 router-link 的 `to` 屬性一樣，可以接受路徑或路由對象
      this.$router.push('/about')
      // 或者
      this.$router.push({ name: 'about' })
    },
    goBack() {
      // 返回上一頁，相當(dāng)于瀏覽器的后退按鈕
      this.$router.back()
    },
    replaceHome() {
      // 用‘替換'的方式跳轉(zhuǎn)，不會在歷史記錄里留下當(dāng)前頁
      this.$router.replace({ name: 'home' })
    }
  }
}
</script>

<script setup>
// 組合式 API 寫法（現(xiàn)在更常用）
import { useRouter } from 'vue-router'

const router = useRouter()

const goToAboutPage = () => {
  router.push('/about')
}
const goBack = () => {
  router.back()
}
</script>

// 在路由規(guī)則中，用冒號 : 來標記動態(tài)部分
const routes = [
  {
    path: '/user/:id', // `:id`就是一個動態(tài)參數(shù)
    name: 'user',
    component: UserView
  }
]

<!-- src/views/UserView.vue -->
<template>
  <div>
    <h2>用戶詳情頁</h2>
    <!-- 在模板中直接使用 -->
    <p>當(dāng)前用戶ID是：{{ $route.params.id }}</p>
    <p>另一種方式獲得的ID：{{ userId }}</p>
  </div>
</template>

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

// 使用 useRoute() 獲取當(dāng)前路由信息
const route = useRoute()

// 動態(tài)參數(shù)是響應(yīng)式的，我們可以用計算屬性來獲取
const userId = computed(() => route.params.id)

// 你也可以通過 route.query 獲取查詢參數(shù)
// 比如 /user/123?name=zhangsan，則 route.query.name 為 ‘zhangsan'
const userName = computed(() => route.query.name)
</script>

// 在路由規(guī)則中開啟 props 傳參
const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: UserView,
    props: true // 將 route.params 作為組件的 props 傳入
    // 或者使用函數(shù)模式，實現(xiàn)更靈活的控制
    // props: (route) => ({ id: Number(route.params.id) })
  }
]

<!-- src/views/UserView.vue -->
<script setup>
// 直接定義 props
defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})
</script>

<template>
  <div>用戶ID是：{{ id }}</div>
</template>

// 回到你的 src/router/index.js
// 在創(chuàng)建并導(dǎo)出 router 實例之后，可以添加守衛(wèi)

// ... createRouter 代碼 ...

// 添加全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  // to: 即將要進入的目標路由對象
  // from: 當(dāng)前導(dǎo)航正要離開的路由對象
  // next: 一個函數(shù)，必須調(diào)用它來解析這個守衛(wèi)

  // 假設(shè)我們有一個簡單的登錄檢查
  const isAuthenticated = localStorage.getItem('token') // 從本地存儲讀取token

  // 如果用戶想去一個需要登錄的頁面（比如頁面元信息里標記了 requiresAuth: true）
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 把他重定向到登錄頁
    next({
      name: 'login',
      // 可以附帶一個查詢參數(shù)，記錄他原本想去哪里，登錄后直接跳過去
      query: { redirect: to.fullPath }
    })
  } else {
    // 放行，去往目標頁面
    next()
  }
})

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: AdminView,
    meta: { requiresAdmin: true }, // 自定義元信息，標記需要管理員權(quán)限
    beforeEnter: (to, from, next) => {
      const userRole = getUserRoleSomehow() // 假設(shè)有個獲取用戶角色的方法
      if (userRole === 'admin') {
        next() // 是管理員，允許進入
      } else {
        next({ name: 'forbidden' }) // 不是管理員，跳轉(zhuǎn)到無權(quán)限頁面
      }
    }
  }
]

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// 守衛(wèi)1：離開組件前提示用戶
onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('你有未保存的更改，確定要離開嗎？')
  // 如果用戶取消，就取消這次導(dǎo)航
  if (!answer) return false
})

// 守衛(wèi)2：當(dāng)路由更新（比如從 /user/1 跳轉(zhuǎn)到 /user/2）時，重新獲取數(shù)據(jù)
import { fetchUserData } from '@/api'
onBeforeRouteUpdate(async (to) => {
  // 組件實例復(fù)用，但參數(shù)從 1 變成了 2
  // 在這里用新的參數(shù) to.params.id 重新獲取用戶數(shù)據(jù)
  await fetchUserData(to.params.id)
})
</script>

const routes = [
  {
    path: '/about',
    name: 'about',
    // 使用動態(tài) import 語法，Webpack/Vite會自動進行代碼分割
    component: () => import('../views/AboutView.vue')
  }
]

const routes = [
  // ... 你的其他路由 ...
  {
    path: '/:pathMatch(.*)*', // 這是Vue Router 4的捕獲所有路由的寫法
    name: 'not-found',
    component: () => import('../views/NotFoundView.vue')
  }
]