解决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参数，关于其中的原因我也不太清楚，有知道的朋友可以在评论告知我。

这篇分享文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。

想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。

感谢你的阅读与支持，期待在未来的文章中与你再次相遇！

我的微信公众号：【xdub】，欢迎大家订阅，我会同步文章到公众号上。