Vue2中路由參數(shù)($route.params和$route.query)的使用方法詳解
更新時間：2026年05月27日 08:16:24 作者：蠟臺
這篇文章主要為大家詳細介紹了Vue2中路由參數(shù)($route.params和$route.query)的使用方法,包括動態(tài)路徑參數(shù)和URL查詢參數(shù)的獲取,并提供了多種寫法示例,希望對大家有所幫助
前置說明
Vue2 路由對象：
$route.params：動態(tài)路徑參數(shù)（如/user/:id）$route.query：URL 查詢參數(shù)（如/user?name=xxx）
1. 基礎用法（class 裝飾器組件，主流寫法）
1.1 獲取 query 參數(shù)（?key=val）
路由配置：
// router/index.ts
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/demo',
name: 'Demo',
component: () => import('@/views/Demo.vue')
}
]
})訪問地址：/demo?name=張三&age=18
組件代碼：
<template>
<div>
<p>姓名：{{ name }}</p>
<p>年齡：{{ age }}</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Demo extends Vue {
// 直接在生命周期取值，添加類型
name!: string
age!: number
created() {
// query 取值
this.name = this.$route.query.name as string
this.age = Number(this.$route.query.age)
}
}
</script>1.2 獲取 params 動態(tài)路由參數(shù)（/:id）
路由配置：
routes: [
{
path: '/user/:id', // 動態(tài)參數(shù) id
name: 'User',
component: () => import('@/views/User.vue')
}
]訪問地址：/user/1001
組件取值：
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class User extends Vue {
userId!: number
created() {
// params 取值
this.userId = Number(this.$route.params.id)
}
}
</script>2. Vue.extend 寫法（無裝飾器）
import Vue from 'vue'
export default Vue.extend({
data() {
return {
id: 0,
username: ''
}
},
created() {
// params
this.id = Number(this.$route.params.id)
// query
this.username = this.$route.query.username as string
}
})3. 路由參數(shù)類型定義（TS 進階，推薦）
給 $route 自定義參數(shù)類型，消除 any 警告，提升類型提示。
3.1：擴展 Vue 路由類型
新建 src/types/vue-router.d.ts
import 'vue-router'
declare module 'vue-router' {
interface RouteParams {
id?: string
}
interface RouteQuery {
name?: string
age?: string
}
}3.2：組件直接使用
TS 會自動識別參數(shù)類型，無需強轉：
created() {
// params 自帶類型
const id = this.$route.params.id
// query 自帶類型
const name = this.$route.query.name
}4. 路由跳轉并傳參（配套使用）
4.1 傳 query 參數(shù)
// 編程式導航
this.$router.push({
path: '/demo',
query: { name: '李四', age: 20 }
})4.2 傳 params 參數(shù)
必須搭配 name + routes 配置動態(tài)參數(shù)，path + params 不生效：
this.$router.push({
name: 'User', // 路由配置里的 name
params: { id: 1002 }
})5. 監(jiān)聽路由變化（同組件路由跳轉，組件不刷新）
當路由地址改變但組件復用（如 /user/1 → /user/2），created/mounted 不會重新執(zhí)行，需要 watch 監(jiān)聽：
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
watch: {
// 監(jiān)聽整個路由對象
$route(to) {
console.log('新參數(shù)：', to.params.id, to.query.name)
this.handleRouteParams()
}
}
})
export default class User extends Vue {
handleRouteParams() {
const id = Number(this.$route.params.id)
console.log('當前id：', id)
}
created() {
this.handleRouteParams() // 首次進入執(zhí)行
}
}
</script>常見坑 & 注意點
- params 參數(shù)永遠是 string 類型 路由解析后
params值默認字符串，數(shù)字務必手動Number()轉換。 path + params無效 傳params只能用name跳轉。- 刷新頁面 params 丟失 params 不會保留在 URL 地址欄，刷新丟失；
query會拼接在地址欄，刷新保留。 - TS 提示 $route 不存在 檢查路由是否全局掛載、
shims文件是否正常。 - 嚴格模式下
!非空斷言 若參數(shù)必傳，使用變量!: 類型繞過 TS 空值校驗
到此這篇關于Vue2中路由參數(shù)($route.params和$route.query)的使用方法詳解的文章就介紹到這了,更多相關Vue2路由參數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue返回上一頁面時不刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue項目引入本地bootstrap不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關于vue中axios請求封裝的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧要的朋友可以參考下2019-03-03
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue項目根據(jù)不同環(huán)境進行設置打包命令的方法
這篇文章主要介紹了vue項目根據(jù)不同環(huán)境進行設置打包命令,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
大屏數(shù)字滾動翻轉效果來源于最近工作中element后臺管理頁面一張大屏的UI圖，該UI圖上有一個模塊需要有數(shù)字往上翻動的效果。本文通過截圖代碼的形式給大家介紹Vue.js實現(xiàn)大屏數(shù)字滾動翻轉效果，感興趣的朋友一起看看吧2019-11-11
這篇文章主要為大家詳細介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了初試vue-cli使用HBuilderx打包app的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03