解决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)// 使用可选链操作符安全访问 canInputif (typeof newQuery?.canInput === 'string') {// 将 string 类型断言为 numbercanInput.value = Number(newQuery.canInput) === 1;} else {canInput.value = false;}}, { immediate: true });
如果只是用route.query,可能拿不到get参数,关于其中的原因我也不太清楚,有知道的朋友可以在评论告知我。
这篇分享文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。
想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。
感谢你的阅读与支持,期待在未来的文章中与你再次相遇!
我的微信公众号:【xdub】,欢迎大家订阅,我会同步文章到公众号上。