vue3在路由里取參數(shù)幾種常見的方法
更新時間：2025年06月05日 10:49:50 作者：用心去追夢
這篇文章主要給大家介紹了關于vue3在路由里取參數(shù)幾種常見的方法,可使用$route（OptionsAPI）、useRoute（CompositionAPI）及watch監(jiān)聽,動態(tài)參數(shù)通過params獲取,查詢參數(shù)用query提取,需要的朋友可以參考下
在 Vue 3 中，使用 Vue Router 獲取路由參數(shù)有多種方式。以下是幾種常見的方法：
1. 通過 this.$route 獲?。∣ptions API）
如果你使用的是 Options API，可以通過 this.$route 訪問路由對象，并從中提取參數(shù)。
export default {
mounted() {
// 獲取動態(tài)路由參數(shù)
const id = this.$route.params.id;
console.log('Route Param:', id);
// 獲取查詢參數(shù)
const queryParam = this.$route.query.someQueryParam;
console.log('Query Param:', queryParam);
}
};
2. 通過 useRoute 獲?。–omposition API）
在 Composition API 中，可以使用 useRoute 鉤子來獲取路由信息。
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
// 獲取動態(tài)路由參數(shù)
const id = route.params.id;
console.log('Route Param:', id);
// 獲取查詢參數(shù)
const queryParam = route.query.someQueryParam;
console.log('Query Param:', queryParam);
return { id, queryParam };
}
};
3. 監(jiān)聽參數(shù)變化
如果路由參數(shù)可能會發(fā)生變化（例如用戶導航到同一個路由但參數(shù)不同），你需要監(jiān)聽參數(shù)的變化。
使用 watch
import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';
export default {
setup() {
const route = useRoute();
const id = ref(route.params.id);
// 監(jiān)聽路由參數(shù)變化
watch(
() => route.params.id,
(newId) => {
id.value = newId;
console.log('Updated Route Param:', newId);
}
);
return { id };
}
};
4. 動態(tài)路由參數(shù)示例
假設你的路由配置如下：
const routes = [
{
path: '/user/:id',
component: UserComponent
}
];
- 動態(tài)參數(shù)
id可以通過route.params.id獲取。 - 查詢參數(shù)（如
/user/123?name=John）可以通過route.query.name獲取。
5. 完整示例
以下是一個完整的示例，展示如何在組件中獲取和監(jiān)聽路由參數(shù)：
<template>
<div>
<p>User ID: {{ id }}</p>
<p>Query Param: {{ queryParam }}</p>
</div>
</template>
<script>
import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';
export default {
setup() {
const route = useRoute();
const id = ref(route.params.id);
const queryParam = ref(route.query.name);
// 監(jiān)聽路由參數(shù)變化
watch(
() => route.params.id,
(newId) => {
id.value = newId;
}
);
// 監(jiān)聽查詢參數(shù)變化
watch(
() => route.query.name,
(newName) => {
queryParam.value = newName;
}
);
return { id, queryParam };
}
};
</script>
注意事項
動態(tài)路由參數(shù) vs 查詢參數(shù)：
- 動態(tài)路由參數(shù)：定義在路徑中的參數(shù)（如
/user/:id）。 - 查詢參數(shù)：URL 中的查詢字符串（如
/user?id=123&name=John）。
- 動態(tài)路由參數(shù)：定義在路徑中的參數(shù)（如
參數(shù)變化時重新加載數(shù)據(jù)：
如果路由參數(shù)發(fā)生變化，但組件沒有重新加載（因為復用了相同的組件實例），需要手動監(jiān)聽參數(shù)變化并更新數(shù)據(jù)。
希望這些內容能幫助你順利在 Vue 3 中獲取路由參數(shù)！
總結
到此這篇關于vue3在路由里取參數(shù)幾種常見的方法的文章就介紹到這了,更多相關vue3路由取參數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中的.sync修飾符用法及原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue vuex vue-rouert后臺項目——權限路由（適合初學）
這篇文章主要介紹了vue vuex vue-rouert后臺項目——權限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關系，本版本非常簡單，適合初學者,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細介紹了Vue + Element UI圖片上傳控件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
淺談Vue render函數(shù)在ElementUi中的應用
今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue spa應用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
今天小編就為大家分享一篇對Vue.js之事件的綁定(v-on: 或者 @ )詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3封裝 Message消息提示實例函數(shù),具有一定的實用價值,需要的朋友可以參考下，希望能夠給你帶來幫助2021-09-09
這篇文章主要為大家詳細介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了Vue的百度地圖插件嘗試使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)圖書管理案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01