有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
你的可能曾经留神到，VUE 3版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变动，而且迁徙过程也十分间接。然而，一个十分不显著但重要的变动经常被忽视，它可能导致难以调试的行为。当初所有的导航都是异步的。
如果你想晓得为什么 URL中的查问参数在你的 setup 办法或 created 钩子中无处可寻，但当插入它们时，它们依然呈现在模板中，不要来到， 咱们来一探到底。
当初所有的导航都是异步的
为了摸索这一点，咱们将应用一个曾经装置了Vue router 4.0 的Vue 3 骨架利用的 barebones 。你能够在这个 repo 中跟着代码走。
地址：https://github.com/Code-Pop/r...
我的项目下载下来后，运行 npm iinstall 而后 运行 npm run serve，界面如下所示:
如果你当初在URL中增加一些查问参数，如 <a href="http://localhost:8080/?param=1" target="blank">http://localhost:8080/?param=1</a>，页面会刷新，并将参数显示在界面上。
让咱们看一下App.vue外面内容，咱们在组件中增加了一个 created 的钩子。你会看到一个console.log行，它打印$router.query的内容，就像咱们在模板中的那样。
<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> Query: <pre>{{ $route.query }}</pre></template><script>export default { data: () => ({}), created () { console.log(this.$route.query) }}</script>咱们持续，像方才一样，应用和不应用查问参数再次运行这个试验。
你会留神到，无论增加多少个参数，或者从新加载多少次页面，控制台打印的this.$route.query都是空的。
接着，让咱们来解开这个问题。
正如一开始提到的，一个常常被忽视的Vue Router 4的破坏性变动是，当初所有的导航都是异步的。正如文档所倡议的那样，在解决 transition 时，这一点变得更加显著，因为当Router从空到被数据填充时，它将触发动画。
咱们之所以能在浏览器中看到参数，但在控制台中却看不到，是因为Vue的响应式的，一旦Router的查问对象可用，就立刻更新HTML。记住，它当初是异步的。这个过程很快，以至于对咱们来说，它仿佛始终都在那里，当在 setup 函数或生命周期钩子（如created()）中解决查问参数时，这可能真的会令人困惑。
修复问题
侥幸的是，这个问题的解决办法是非常简单。咱们只需到 main.js 中，期待路由 ready 好后再挂载程序，如下所示:
import { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)// Replace -> app.mount('#app')router.isReady().then(() => { app.mount('#app')})当初，回到浏览器，增加参数并从新加载，就会在管制台上看到咱们的参数信息了。
作者：Marina Mosti 译者：前端小智 起源：medium
原文：
https://www.vmastery.com/blog...
交换
文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。