共计 1821 个字符,预计需要花费 5 分钟才能阅读完成。
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。