vue3 useRoute無法獲取get參數(shù)的問題解決
更新時間：2026年03月17日 08:46:32 作者：一方_self
本文主要介紹了vue3 useRoute無法獲取get參數(shù)的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
總結(jié)：
使用route.query無法獲取到get參數(shù)，開發(fā)模式代碼改動能拿到，但是刷新又沒了，需要監(jiān)聽route.query才能拿到get參數(shù)。
正文：
我的常規(guī)使用方法：
先安裝vue-router
npm install vue-router@next
創(chuàng)建src/router/index.js：
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue';
const routes = [
{ path: '/', component: HelloWorld },
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
在main.js中使用路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
最后在組件或頁面中使用：
<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.query, (newQuery) => {
console.log('query', newQuery)
}, { immediate: true });
</script>
使用watch才能拿到get參數(shù)，這里的watch會執(zhí)行兩次：
我的應(yīng)用場景是：當get參數(shù)中canInput等于1時，才顯示頁面某個元素，我的代碼如下：
const canInput = ref(false) // 是否可以輸入?yún)?shù)
watch(() => route.query, (newQuery) => {
console.log('query', newQuery)
// 使用可選鏈操作符安全訪問 canInput
if (typeof newQuery?.canInput === 'string') {
// 將 string 類型斷言為 number
canInput.value = Number(newQuery.canInput) === 1;
} else {
canInput.value = false;
}
}, { immediate: true });
如果只是用route.query，可能拿不到get參數(shù)，關(guān)于其中的原因我也不太清楚，有知道的朋友可以在評論告知我。
到此這篇關(guān)于vue3 useRoute無法獲取get參數(shù)的問題解決的文章就介紹到這了,更多相關(guān)vue3 useRoute無法獲取get參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實例的一些簡單方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
關(guān)于element-ui resetFields重置方法無效問題及解決
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問題 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
文章介紹了如何使用Node.js搭建Vue工程,并對Vue工程目錄進行了詳細解讀,包括各種文件夾和文件的作用,此外,還講解了如何設(shè)置網(wǎng)頁標題和全局樣式,以及如何配置路由,感興趣的朋友一起看看吧2025-03-03
使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vuex是一個專門為vue.js設(shè)計的狀態(tài)管理模式，并且也可以使用devtools進行調(diào)試。2017-05-05
在前端開發(fā)中,除了通過 API 動態(tài)請求的數(shù)據(jù)外,還有一些諸如 HTML 文件、圖片、字體等文件需要在項目中被用到,通常這些被視為靜態(tài)資源,本文將基于 Vite + React 來講述并解鎖 Vite 引用本地靜態(tài)資源的正確姿勢,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細介紹了vue使用echarts實現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03