利用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】，欢迎大家订阅，我会同步文章到公众年夜众号上。
