您可能已经注意到，VUE3版本的Vuerouter(4.0)与之前的版本相比有一些breakingchange的变化。大多数VueRouterAPI没有变化，迁移过程非常简单。然而，一个非常不明显但很重要的变化经常被忽视，它可能导致难以调试的行为。所有导航现在都是异步的。如果你想知道为什么在你的设置方法或创建的钩子中找不到URL中的查询参数，但是插入它们时，它们仍然出现在模板中，不要离开我们来一探究竟。现在所有导航都是异步的。为了探索这一点，我们将使用安装了Vue路由器4.0的Vue3骨架应用程序的准系统。您可以按照此存储库中的代码进行操作。地址：https://github.com/Code-Pop/router-4-async。项目下载完成后，运行npmiiinstall，然后运行npmrunserve，界面如下：如果现在在url中添加一些查询参数，比如
{{$route.query}}script>exportdefault{data:()=>({}),created(){console.log(this.$route.query)}}让我们继续像以前一样再次运行实验，使用和没有查询参数。您会注意到，无论添加多少参数，或者重新加载页面多少次，打印到控制台的this.$route.query都是空的。接下来，我们来解决这个问题。正如开头提到的，VueRouter4中一个经常被忽视的突破性变化是所有导航现在都是异步的。正如文档所建议的那样，这在处理转换时变得更加明显，因为当路由器从空变为充满数据时它会触发动画。我们可以在浏览器中看到参数但在控制台中看不到参数的原因是因为Vue是反应式的，一旦路由器的查询对象可用就会更新HTML。请记住，它现在是异步的。这个过程如此之快，以至于对我们来说它似乎一直都在，这可能真的很令人困惑。修复问题幸运的是，这个问题的解决方案非常简单。我们只需要进入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')})现在，回到浏览器，添加参数并重新加载，你会在控制台看到我们的参数信息。