有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。您可能已经注意到，Vue路由器(4.0)的Vue3版本与其前身相比有一些重大变化。大多数VueRouterAPI没有变化，迁移过程非常简单。然而，一个非常不明显但很重要的变化经常被忽视，它可能导致难以调试的行为。所有导航现在都是异步的。如果你想知道为什么在你的设置方法或创建的钩子中找不到URL中的查询参数，但是插入它们时，它们仍然出现在模板中，不要离开，让我们找出来。现在所有导航都是异步的。为了探索这一点，我们将使用安装了Vue路由器4.0的Vue3骨架应用程序的准系统。您可以按照此存储库中的代码进行操作。地址：https://github.com/Code-Pop/r...项目下载完成后，运行npmiiinstall，然后运行npmrunserve，界面如下：如果现在在url中添加一些查询参数，比如
{{$route.query}}script>exportdefault{data:()=>({}),created(){console.log(this.$route.query)}}让我们继续像以前一样再次运行实验，使用和没有查询参数。您会注意到，无论添加多少参数，或者重新加载页面多少次，打印到控制台的this.$route.query都是空的。接下来，我们来解决这个问题。正如开头提到的，VueRouter4中一个经常被忽视的突破性变化是所有导航现在都是异步的。正如文档所建议的那样，这在处理转换时变得更加明显，因为当路由器从空变为充满数据时它会触发动画。我们可以在浏览器中看到参数但在控制台中看不到参数的原因是因为Vue是反应式的，一旦路由器的查询对象可用就会更新HTML。请记住，它现在是异步的。这个过程是如此之快，以至于对我们来说它似乎一直都在那里，在处理设置函数中的查询参数或像created()这样的生命周期挂钩时，这真的很令人困惑。修复问题幸运的是，这个问题的解决方案非常简单。我们只需要进入main.js，等待路由准备好，再挂载程序，如下：import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'constapp=createApp(App)app.use(router)//替换->app.mount('#app')router.isReady().then(()=>{app.mount('#app')})现在，回到浏览器，添加参数并重新加载，你会在控制台看到我们的参数信息。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。作者：MarinaMosti译者：FrontendXiaozhi来源：medium原文：https://www.vmastery.com/blog...交流文章每周持续更新，微信搜索“大千世界”即可阅读和阅读马上提醒更多（比博客早一两篇），这篇文章的GitHubhttps://github.com/qq449245884/xiaozhi已经收录了，整理了很多我的文档。欢迎明星和完美。面试复习可以参考考点，关注公众号，后台回复福利就可以看到福利，就知道了。