vue3 useRoute无法获取get参数的问题解决
作者：一方_self
本文主要介绍了vue3 useRoute无法获取get参数的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
总结：
使用route.query无法获取到get参数，开发模式代码改动能拿到，但是刷新又没了，需要监听route.query才能拿到get参数。
正文：
我的常规使用方法：
先安装vue-router
npm install vue-router@next
创建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参数，这里的watch会执行两次：
我的应用场景是：当get参数中canInput等于1时，才显示页面某个元素，我的代码如下：
const canInput = ref(false) // 是否可以输入参数
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参数，关于其中的原因我也不太清楚，有知道的朋友可以在评论告知我。
到此这篇关于vue3 useRoute无法获取get参数的问题解决的文章就介绍到这了,更多相关vue3 useRoute无法获取get参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！