一、前言

在 Vue2 開(kāi)發(fā)中，我們依托 this.$router 實(shí)現(xiàn)路由跳轉(zhuǎn)，通過(guò) this.$route 獲取路由參數(shù)。但 Vue3 啟用 <script setup> 組合式語(yǔ)法后，組件不再存在 this 實(shí)例，傳統(tǒng)的原型調(diào)用方式徹底失效。

為此，Vue Router 4.x 推出兩大核心組合式 API：useRouter、useRoute，作為 Vue3 項(xiàng)目路由操作的唯一標(biāo)準(zhǔn)寫法。

很多開(kāi)發(fā)者日常開(kāi)發(fā)經(jīng)常混淆二者用法，出現(xiàn)傳參失效、頁(yè)面刷新參數(shù)丟失、路由跳轉(zhuǎn)異常、history歷史錯(cuò)亂等問(wèn)題。本文將從零落地講解路由跳轉(zhuǎn)、三種傳參方案、參數(shù)接收規(guī)則、核心區(qū)別與企業(yè)級(jí)避坑技巧，適配零基礎(chǔ)學(xué)習(xí)、項(xiàng)目實(shí)戰(zhàn)與面試備考。

二、核心本質(zhì)：useRouter 與 useRoute 終極區(qū)分

二者各司其職，核心定位完全不同，只需記住一句話：Router 管操作，Route 管讀取。

• useRouter（路由操作器） ：對(duì)應(yīng) Vue2 的 this.$router，負(fù)責(zé)寫操作。用于主動(dòng)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)、路由替換、清空歷史記錄、控制路由邏輯。
• useRoute（路由讀取器） ：對(duì)應(yīng) Vue2 的 this.$route，負(fù)責(zé)讀操作。為只讀屬性，用于獲取當(dāng)前頁(yè)面路徑、路由參數(shù)、路由名稱、meta元信息等。

三、基礎(chǔ)路由跳轉(zhuǎn)：push 最常用場(chǎng)景

useRouter.push 是項(xiàng)目中最高頻的路由跳轉(zhuǎn)方式，跳轉(zhuǎn)頁(yè)面后會(huì)追加一條瀏覽器歷史記錄，支持點(diǎn)擊返回按鈕回退上一頁(yè)，適用于絕大多數(shù)正常頁(yè)面跳轉(zhuǎn)場(chǎng)景。

標(biāo)準(zhǔn)語(yǔ)法示例（Vue3 setup 完整版）

<script setup>
// 引入路由核心方法
import { useRouter } from 'vue-router'

// 生成路由實(shí)例
const router = useRouter()

// 普通頁(yè)面跳轉(zhuǎn)
const goHome = () => {
  router.push('/home')
}
</script>

四、Vue3 三種路由傳參方案（全覆蓋項(xiàng)目場(chǎng)景）

Vue3 路由傳參分為三種主流方式：params隱式傳參、query顯式傳參、動(dòng)態(tài)路由傳參。三種方式的語(yǔ)法規(guī)則、URL展示、刷新機(jī)制、安全性完全不同，絕對(duì)禁止隨意混用。

1、params 隱式傳參（name + params 固定搭配）

核心強(qiáng)制規(guī)則：params 只能搭配 路由 name 使用，絕對(duì)不能和 path 混用，否則參數(shù)直接失效。

特點(diǎn)：參數(shù)不會(huì)拼接在瀏覽器 URL 地址欄中，隱藏傳輸、私密性更強(qiáng)，適合傳遞臨時(shí)私密參數(shù)。

1.1 路由前置配置（必須聲明 name）

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  {
    path: '/home',
    name: 'Home', // params傳參必須依賴路由name屬性
    component: Home
  }
]

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

export default router

1.2 父組件傳參寫法

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goHome = () => {
  router.push({
    name: 'Home', // 匹配路由配置的name
    params: {
      username: '前端開(kāi)發(fā)者',
      id: 1001
    }
  })
}
</script>

1.3 子組件接收參數(shù)

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()

// 讀取params參數(shù)
console.log(route.params)
console.log(route.params.username)
console.log(route.params.id)
</script>

2、query 顯式傳參（path + query 固定搭配）

核心強(qiáng)制規(guī)則：query 必須搭配 路由 path 使用，參數(shù)會(huì)明文拼接在 URL 地址欄末尾。

特點(diǎn)：類似 GET 請(qǐng)求傳參，參數(shù)公開(kāi)透明，頁(yè)面刷新參數(shù)不會(huì)丟失，適合傳遞公開(kāi)、需要持久展示的參數(shù)。

2.1 父組件傳參寫法

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goHome = () => {
  router.push({
    path: '/home', // 匹配路由路徑
    query: {
      username: '前端開(kāi)發(fā)者',
      id: 1001
    }
  })
}
</script>

2.2 子組件接收參數(shù)

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()

// 讀取query參數(shù)
console.log(route.query)
console.log(route.query.username)
console.log(route.query.id)
</script>

3、動(dòng)態(tài)路由傳參（路徑占位傳參）

通過(guò)在路由配置中聲明 :參數(shù)名 作為動(dòng)態(tài)占位符，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)傳參，是項(xiàng)目詳情頁(yè)、ID匹配頁(yè)面的主流方案。

適用場(chǎng)景：僅用于傳遞 ID、唯一標(biāo)識(shí)、序號(hào)等簡(jiǎn)單基礎(chǔ)數(shù)據(jù)類型。

3.1 路由配置動(dòng)態(tài)占位符

const routes = [
  {
    path: '/detail/:id', // :id 動(dòng)態(tài)參數(shù)占位符
    name: 'Detail',
    component: () => import('@/views/Detail.vue')
  }
]

3.2 父組件跳轉(zhuǎn)傳參

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 直接拼接動(dòng)態(tài)參數(shù)跳轉(zhuǎn)
const goDetail = () => {
  router.push('/detail/1001')
}
</script>

3.3 子組件接收動(dòng)態(tài)參數(shù)

動(dòng)態(tài)路由匹配的參數(shù)，會(huì)自動(dòng)掛載到 route.params 中。

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()

// 獲取動(dòng)態(tài)路由參數(shù)
console.log(route.params.id)
</script>

五、query 與 params 核心區(qū)別（面試高頻必背）

• URL展示差異：query 參數(shù)明文展示在地址欄；params 參數(shù)隱藏不展示，私密性更好。
• 刷新機(jī)制差異：query 刷新頁(yè)面參數(shù)永久保留；params 刷新頁(yè)面參數(shù)直接丟失。
• 搭配規(guī)則差異：query 綁定 path 使用，params 綁定 name 使用，二者嚴(yán)禁混搭。
• 適用場(chǎng)景差異：公開(kāi)參數(shù)、篩選條件用 query；臨時(shí)私密參數(shù)、頁(yè)面臨時(shí)交互數(shù)據(jù)用 params。
• 編碼體驗(yàn)差異：原生截取URL參數(shù)易出現(xiàn)轉(zhuǎn)碼報(bào)錯(cuò)，統(tǒng)一使用 useRoute 取值，可自動(dòng)處理轉(zhuǎn)碼問(wèn)題，零BUG。

六、push 與 replace 跳轉(zhuǎn)模式核心差異

1、push 跳轉(zhuǎn)（追加歷史記錄）

跳轉(zhuǎn)后新增一條瀏覽器歷史記錄，用戶可點(diǎn)擊返回按鈕回退上一頁(yè)。適用于列表跳轉(zhuǎn)詳情、普通頁(yè)面流轉(zhuǎn)等絕大多數(shù)業(yè)務(wù)場(chǎng)景。

2、replace 跳轉(zhuǎn)（替換歷史記錄）

跳轉(zhuǎn)時(shí)直接替換當(dāng)前頁(yè)面的歷史記錄，不會(huì)新增歷史條目，用戶無(wú)法回退到上一頁(yè)。適用于登錄成功跳轉(zhuǎn)、結(jié)果頁(yè)跳轉(zhuǎn)、404頁(yè)面等禁止回退的場(chǎng)景。

寫法一：直接調(diào)用 replace

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goDetail = () => {
  router.replace('/detail/1001')
}
</script>

寫法二：push 配置 replace:true（等效替換）

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goDetail = () => {
  router.push({
    path: '/detail/1001',
    replace: true
  })
}
</script>

七、企業(yè)級(jí)開(kāi)發(fā)避坑總結(jié)（高頻BUG解決方案）

• 禁止混搭傳參：path 只能搭配 query，name 只能搭配 params，混搭直接導(dǎo)致參數(shù)失效。
• params 參數(shù)不持久：刷新頁(yè)面params參數(shù)會(huì)丟失，重要業(yè)務(wù)數(shù)據(jù)禁止用params傳遞，需持久化可配合 localStorage。
• 動(dòng)態(tài)傳參局限性：僅支持簡(jiǎn)單數(shù)據(jù)類型，對(duì)象、數(shù)組等復(fù)雜數(shù)據(jù)優(yōu)先使用 params 傳參。
• 統(tǒng)一取值規(guī)范：摒棄原生URL截取參數(shù)的方式，全程使用 useRoute 取值，規(guī)避轉(zhuǎn)碼、空值等異常問(wèn)題。
• 合理使用replace：登錄跳轉(zhuǎn)、支付結(jié)果頁(yè)、提交成功頁(yè)優(yōu)先用replace，避免用戶回退觸發(fā)重復(fù)操作。

八、全文終極總結(jié)

Vue3 組合式路由 API 核心邏輯高度統(tǒng)一，只需記住兩大核心、三類場(chǎng)景：

• useRouter：負(fù)責(zé)所有路由跳轉(zhuǎn)動(dòng)作，push 追加頁(yè)面、replace 替換頁(yè)面。
• useRoute：負(fù)責(zé)所有路由參數(shù)讀取，統(tǒng)一獲取 query、params、動(dòng)態(tài)路由參數(shù)、路由元信息。
• 公開(kāi)持久參數(shù)用 query，臨時(shí)私密參數(shù)用 params，ID類唯一標(biāo)識(shí)用動(dòng)態(tài)路由傳參。

掌握以上規(guī)范，可徹底解決 Vue3 路由傳參失效、刷新丟失、跳轉(zhuǎn)異常等99%的項(xiàng)目問(wèn)題，寫出規(guī)范、優(yōu)雅、零BUG的企業(yè)級(jí)路由代碼。

九、高頻實(shí)戰(zhàn)補(bǔ)充：路由參數(shù)監(jiān)聽(tīng)（解決頁(yè)面不刷新BUG）

在 Vue3 項(xiàng)目中，存在一個(gè)經(jīng)典疑難問(wèn)題：同一路由頁(yè)面，僅參數(shù)變化時(shí)，組件不會(huì)重新渲染，頁(yè)面數(shù)據(jù)不會(huì)自動(dòng)更新。比如列表頁(yè)點(diǎn)擊不同 ID 跳轉(zhuǎn)詳情頁(yè)、篩選參數(shù)切換頁(yè)面，視圖無(wú)刷新、數(shù)據(jù)不更新。

Vue2 中可通過(guò) watch 監(jiān)聽(tīng) $route 解決，Vue3 setup 語(yǔ)法下，需搭配 watch + useRoute 實(shí)現(xiàn)路由參數(shù)實(shí)時(shí)監(jiān)聽(tīng)，是企業(yè)級(jí)開(kāi)發(fā)必備技能。

1、基礎(chǔ)監(jiān)聽(tīng)：監(jiān)聽(tīng)整個(gè)路由對(duì)象

適合路由任意參數(shù)、路徑變化都需要刷新數(shù)據(jù)的場(chǎng)景，開(kāi)啟深度監(jiān)聽(tīng)即可響應(yīng)所有路由變化。

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

const route = useRoute()

// 監(jiān)聽(tīng)整個(gè)路由變化
watch(
  () => route,
  (newVal) => {
    console.log('路由發(fā)生變化', newVal)
    // 重新請(qǐng)求接口、刷新頁(yè)面數(shù)據(jù)
    getPageData()
  },
  { deep: true }
)

// 模擬頁(yè)面接口請(qǐng)求
const getPageData = () => {
  console.log('最新ID：', route.params.id || route.query.id)
}
</script>

2、精準(zhǔn)監(jiān)聽(tīng)：只監(jiān)聽(tīng)指定參數(shù)（推薦企業(yè)級(jí)用法）

全局監(jiān)聽(tīng)整個(gè)路由會(huì)產(chǎn)生多余觸發(fā)，性能不佳。日常開(kāi)發(fā)精準(zhǔn)監(jiān)聽(tīng) params / query 指定參數(shù)，按需觸發(fā)接口請(qǐng)求，性能更優(yōu)、邏輯更嚴(yán)謹(jǐn)。

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

const route = useRoute()

// 精準(zhǔn)監(jiān)聽(tīng) query 中 id 參數(shù)變化
watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      // 參數(shù)變化，重新拉取詳情數(shù)據(jù)
      getDetailData(newId)
    }
  }
)

// 精準(zhǔn)監(jiān)聽(tīng) params 中 id 參數(shù)變化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      getDetailData(newId)
    }
  }
)

const getDetailData = (id) => {
  console.log('刷新詳情數(shù)據(jù)，ID：', id)
}
</script>

3、高級(jí)優(yōu)化：首次進(jìn)入+參數(shù)變化統(tǒng)一觸發(fā)

默認(rèn) watch 僅監(jiān)聽(tīng)參數(shù)變化，頁(yè)面首次加載不會(huì)觸發(fā)。搭配 immediate: true可實(shí)現(xiàn)頁(yè)面初始化、路由參數(shù)變更雙向觸發(fā)，精簡(jiǎn)冗余代碼，無(wú)需單獨(dú)調(diào)用接口。

// 首次進(jìn)入 + 參數(shù)變化 自動(dòng)請(qǐng)求數(shù)據(jù)
watch(
  () => route.params.id,
  (newId) => {
    newId && getDetailData(newId)
  },
  { immediate: true }
)

4、路由監(jiān)聽(tīng)核心避坑要點(diǎn)

• 禁止濫用深度監(jiān)聽(tīng)：無(wú)需監(jiān)聽(tīng)整個(gè)路由對(duì)象，精準(zhǔn)監(jiān)聽(tīng)所需參數(shù)，減少無(wú)效渲染、優(yōu)化頁(yè)面性能
• 搭配immediate按需使用：需要頁(yè)面初始化加載接口就開(kāi)啟，無(wú)需首次加載則關(guān)閉，避免重復(fù)請(qǐng)求
• 區(qū)分params/query監(jiān)聽(tīng)：根據(jù)自身傳參方式監(jiān)聽(tīng)對(duì)應(yīng)參數(shù)，避免監(jiān)聽(tīng)錯(cuò)誤導(dǎo)致數(shù)據(jù)不刷新
• 規(guī)避重復(fù)請(qǐng)求：可搭配 loading 狀態(tài)鎖，防止路由快速切換觸發(fā)多次接口請(qǐng)求

十、路由全套最終總結(jié)（面試+項(xiàng)目完整版）

整合路由跳轉(zhuǎn)、傳參、歷史模式、參數(shù)監(jiān)聽(tīng)全套核心邏輯，一文吃透Vue3路由：

• 核心API區(qū)分：useRouter負(fù)責(zé)跳轉(zhuǎn)操作，useRoute負(fù)責(zé)參數(shù)讀取，各司其職不混用
• 傳參規(guī)范：path+query公開(kāi)持久、name+params私密臨時(shí)、動(dòng)態(tài)路由傳ID標(biāo)識(shí)
• 跳轉(zhuǎn)模式：push追加歷史可回退，replace替換歷史禁止回退
• 頁(yè)面刷新解決方案：同路由參數(shù)變化不刷新，用watch精準(zhǔn)監(jiān)聽(tīng)路由參數(shù)即可解決
• 開(kāi)發(fā)準(zhǔn)則：杜絕參數(shù)混搭、摒棄原生截取URL、合理使用replace、精準(zhǔn)監(jiān)聽(tīng)路由變化，寫出零BUG企業(yè)級(jí)路由代碼

到此這篇關(guān)于Vue3路由useRoute/useRouter傳參、跳轉(zhuǎn)、避坑最全實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Vue3路由useRoute/useRouter傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論