一、前言

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

為此，Vue Router 4.x 推出兩大核心組合式 API：useRouter、useRoute，作為 Vue3 項目路由操作的唯一標準寫法。

很多開發(fā)者日常開發(fā)經(jīng)?；煜哂梅?，出現(xiàn)傳參失效、頁面刷新參數(shù)丟失、路由跳轉異常、history歷史錯亂等問題。本文將從零落地講解路由跳轉、三種傳參方案、參數(shù)接收規(guī)則、核心區(qū)別與企業(yè)級避坑技巧，適配零基礎學習、項目實戰(zhàn)與面試備考。

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

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

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

三、基礎路由跳轉：push 最常用場景

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

標準語法示例（Vue3 setup 完整版）

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

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

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

四、Vue3 三種路由傳參方案（全覆蓋項目場景）

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

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

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

特點：參數(shù)不會拼接在瀏覽器 URL 地址欄中，隱藏傳輸、私密性更強，適合傳遞臨時私密參數(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: '前端開發(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 固定搭配）

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

特點：類似 GET 請求傳參，參數(shù)公開透明，頁面刷新參數(shù)不會丟失，適合傳遞公開、需要持久展示的參數(shù)。

2.1 父組件傳參寫法

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

const goHome = () => {
  router.push({
    path: '/home', // 匹配路由路徑
    query: {
      username: '前端開發(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、動態(tài)路由傳參（路徑占位傳參）

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

適用場景：僅用于傳遞 ID、唯一標識、序號等簡單基礎數(shù)據(jù)類型。

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

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

3.2 父組件跳轉傳參

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

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

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

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

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

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

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

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

六、push 與 replace 跳轉模式核心差異

1、push 跳轉（追加歷史記錄）

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

2、replace 跳轉（替換歷史記錄）

跳轉時直接替換當前頁面的歷史記錄，不會新增歷史條目，用戶無法回退到上一頁。適用于登錄成功跳轉、結果頁跳轉、404頁面等禁止回退的場景。

寫法一：直接調用 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è)級開發(fā)避坑總結（高頻BUG解決方案）

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

八、全文終極總結

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

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

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

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

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

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

1、基礎監(jiān)聽：監(jiān)聽整個路由對象

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

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

const route = useRoute()

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

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

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

全局監(jiān)聽整個路由會產(chǎn)生多余觸發(fā)，性能不佳。日常開發(fā)精準監(jiān)聽 params / query 指定參數(shù)，按需觸發(fā)接口請求，性能更優(yōu)、邏輯更嚴謹。

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

const route = useRoute()

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

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

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

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

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

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

4、路由監(jiān)聽核心避坑要點

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

十、路由全套最終總結（面試+項目完整版）

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

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

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

最新評論