引言

如何在項(xiàng)目中實(shí)現(xiàn)頁(yè)面切換，而不用每次都重新加載整個(gè)頁(yè)面？答案就是 Vue Router。這篇就來(lái)聊聊 Vue Router 4.x 在 Vue 3 中的集成與使用，分析它的基礎(chǔ)配置、路由守衛(wèi)和懶加載等核心概念到底是怎么回事。

1. Vue Router 與 SPA：它是什么，解決了什么問(wèn)題？
2. 基本用法：如何安裝、配置、掛載，并在組件中使用。
3. 高級(jí)用法：路由守衛(wèi)、懶加載、嵌套路由與參數(shù)傳遞。
4. 常見(jiàn)問(wèn)題與注意事項(xiàng)：入坑必知的幾個(gè)要點(diǎn)。

一、什么是 Vue Router？有什么作用？

Vue Router 是 Vue.js 的官方路由管理器，用于構(gòu)建單頁(yè)面應(yīng)用程序（SPA） 。它通過(guò)監(jiān)聽(tīng) URL 的變化，動(dòng)態(tài)地切換頁(yè)面中顯示的內(nèi)容組件，而無(wú)需重新加載整個(gè)網(wǎng)頁(yè)，從而實(shí)現(xiàn)流暢的用戶(hù)體驗(yàn)。

• 官方地址：Vue Router | Vue.js 的官方路由

1.1 核心使用場(chǎng)景

• 構(gòu)建單頁(yè)面應(yīng)用程序（SPA）
• 需要前端路由管理的項(xiàng)目，例如后臺(tái)管理系統(tǒng)、多頁(yè)面應(yīng)用
• 需要實(shí)現(xiàn)頁(yè)面導(dǎo)航、路由守衛(wèi)（權(quán)限控制）和懶加載（按需加載）等功能
• 需要基于路由的參數(shù)傳遞和狀態(tài)管理

1.2 常見(jiàn)坑：版本匹配問(wèn)題

Vue Router 4.x 專(zhuān)為 Vue 3 設(shè)計(jì)，不兼容 Vue 2。如果項(xiàng)目是 Vue 2，請(qǐng)使用 Vue Router 3.x。這是一個(gè)新手最容易踩的坑。

二、基本用法：最小配置與核心概念

先給結(jié)論：引入 Vue Router 主要分三步——安裝、配置路由、掛載到應(yīng)用。下面具體拆解一下。

第一步：安裝

根據(jù)你的包管理器選擇一種方式安裝：

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

第二步：配置路由實(shí)例

在 src? 目錄下創(chuàng)建 router/index.ts 文件。這是整個(gè)應(yīng)用路由的配置中心。

// 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)建路由實(shí)例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes
})

export default router

代碼解析：

1. ??createRouter?? 和 createWebHistory?：這是創(chuàng)建 Vue Router 實(shí)例的兩個(gè)核心 API。createRouter? 接收一個(gè)配置對(duì)象，createWebHistory? 表示啟用 history 模式。
2. ??component: () => import(...)? ?：這是路由懶加載的標(biāo)準(zhǔn)寫(xiě)法。它告訴 Vue Router 在用戶(hù)首次訪(fǎng)問(wèn) /about? 路由時(shí)，才去加載 AboutView.vue 組件，而不是在應(yīng)用啟動(dòng)時(shí)就加載所有頁(yè)面。這能顯著提升首屏加載速度。
3. ??props: true??：將 :id 等路由參數(shù)直接以 props 的形式注入到組件中，讓組件更純粹，方便測(cè)試和復(fù)用。

第三步：掛載到 Vue 應(yīng)用

在 main.ts 中將創(chuàng)建好的路由實(shí)例掛載到 Vue 應(yīng)用上。

// 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')

第四步：在組件中使用

在 App.vue? 或其他組件中，使用 <router-link>? 進(jìn)行頁(yè)面跳轉(zhuǎn)，使用 <router-view> 作為頁(yè)面內(nèi)容的占位符。

<template>
  <div>
    <nav>
      <router-link to="/">首頁(yè)</router-link>
      <router-link to="/about">關(guān)于</router-link>
      <router-link :to="{ name: 'User', params: { id: 123 }}">用戶(hù)頁(yè)面</router-link>
    </nav>

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

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

// 獲取路由實(shí)例和當(dāng)前路由對(duì)象
const router = useRouter()
const route = useRoute()

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

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

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

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

三、路由守衛(wèi)與懶加載實(shí)踐

在真實(shí)的項(xiàng)目中，我們通常需要更復(fù)雜的配置，例如全局的權(quán)限控制、全局的進(jìn)度條加載動(dòng)畫(huà)和嵌套路由。

3.1 路由模式

劃重點(diǎn)： 在正式項(xiàng)目中，推薦使用 history 模式，但一定不要忘記在 Nginx、Apache 等服務(wù)器上配置 try_files $uri $uri/ /index.html?，否則用戶(hù)直接訪(fǎng)問(wèn) /about 頁(yè)面時(shí)會(huì)返回 404。

3.2 高級(jí)配置：集成路由守衛(wèi)與進(jìn)度條

這個(gè)示例展示了更完整的項(xiàng)目級(jí)配置：將路由配置分離，并在路由守衛(wèi)中集成全局進(jìn)度條。

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

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

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

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

export default router

路由守衛(wèi)的核心邏輯是 next()? 函數(shù)。切記：在每個(gè)判斷分支都一定要調(diào)用 next()，否則頁(yè)面會(huì)卡住。這是新手最常犯的錯(cuò)誤。

3.3 路由配置分離（示例）

將路由配置獨(dú)立成文件 src/router/routes.ts，方便管理和擴(kuò)展。

// 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

3.4 組件級(jí)別的路由出口與 keep-alive

當(dāng)使用 <router-view>? 時(shí)，可以結(jié)合 Vue 的 <keep-alive> 組件，實(shí)現(xiàn)頁(yè)面狀態(tài)的緩存（例如避免表單位置丟失）。

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

四、路由高級(jí)用法：嵌套路由與參數(shù)處理

4.1 嵌套路由

嵌套路由用于構(gòu)建頁(yè)面內(nèi)部的子導(dǎo)航，比如一個(gè)后臺(tái)管理系統(tǒng)的側(cè)邊欄內(nèi)容。在上面的 routes.ts? 示例中，children? 數(shù)組就是嵌套路由的用法：訪(fǎng)問(wèn) /index/article? 時(shí)，ArticleView? 組件會(huì)渲染在父組件 Homepage.vue? 的 <router-view> 中。

4.2 動(dòng)態(tài)路由參數(shù)與監(jiān)聽(tīng)變化

當(dāng)路由參數(shù)變化時(shí)（比如從 /user/1? 跳轉(zhuǎn)到 /user/2?），組件實(shí)例會(huì)被復(fù)用，這意味著組件的 created? 或 mounted? 鉤子不會(huì)再次執(zhí)行。此時(shí)，你需要監(jiān)聽(tīng) ?route?? 對(duì)象的變化來(lái)獲取新的參數(shù)并獲取數(shù)據(jù)。

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

const route = useRoute()

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

五、常見(jiàn)問(wèn)題與注意事項(xiàng)

• 動(dòng)態(tài)路由參數(shù)變化組件不重新創(chuàng)建：如上文所述，需要通過(guò) watch? 監(jiān)聽(tīng) route.params 來(lái)響應(yīng)變化。
• 路由配置應(yīng)合理組織：避免過(guò)于復(fù)雜的嵌套，建議將功能相關(guān)的路由放在同一個(gè)模塊的 children 中。
• 路由守衛(wèi)執(zhí)行順序：全局守衛(wèi)（global.beforeEach?）→ 路由配置守衛(wèi)（beforeEnter?）→ 組件內(nèi)守衛(wèi)（beforeRouteEnter）。理解這個(gè)順序?qū)?quán)限控制至關(guān)重要。
• props 傳參：推薦在配置路由時(shí)啟用 props: true，這能讓組件與路由解耦，更易于測(cè)試和維護(hù)。

最后

Vue Router 是 Vue 3 生態(tài)中一個(gè)穩(wěn)定且強(qiáng)大的核心庫(kù)。寫(xiě) SPA 項(xiàng)目，99% 的場(chǎng)景都離不開(kāi)它。記住 版本匹配 和 路由守衛(wèi)的 next 這兩個(gè)關(guān)鍵點(diǎn)，基本就能應(yīng)對(duì)大多數(shù)日常開(kāi)發(fā)了。

以上就是Vue3集成Vue Router從基礎(chǔ)配置到項(xiàng)目實(shí)踐的完整指南的詳細(xì)內(nèi)容，更多關(guān)于Vue3集成Vue Router的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論