有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。你的可能已经注意到,VUE 3版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变化,而且迁移过程也非常直接。然而,一个非常不明显但重要的变化常常被忽视,它可能导致难以调试的行为。现在所有的导航都是异步的。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
如果你想知道为什么 URL中的查询参数在你的
setup
方法或 created
钩子中无处可寻,但当插入它们时,它们仍然出现在模板中,不要离开, 我们来一探究竟。现在所有的导航都是异步的 【前端|注意避坑,Vue Router 4: 路由参数在 created/setup 时不可用】为了探索这一点,我们将使用一个已经安装了Vue router 4.0 的Vue 3 骨架应用的 barebones 。你可以在这个 repo 中跟着代码走。
地址:https://github.com/Code-Pop/router-4-async项目下载下来后,运行
npm iinstall
然后 运行 npm run serve
,界面如下所示:文章图片
如果你现在在URL中添加一些查询参数,如
http://localhost:8080/?param=1
,页面会刷新,并将参数显示在界面上。文章图片
让我们看一下
App.vue
里面内容,我们在组件中添加了一个 created
的钩子。你会看到一个console.log
行,它打印$router.query
的内容,就像我们在模板中的那样。Home |
About Query:
{{ $route.query }}
我们继续,像刚才一样,使用和不使用查询参数再次运行这个实验。
你会注意到,无论添加多少个参数,或者重新加载多少次页面,控制台打印的
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/vue-router-4-rute-params-not-available-on-created-setup/
交流 文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。
推荐阅读
- 前端|新提案,初识CSS的object-view-box属性
- 前端|停止像这样使用 “async/await“,改用原版
- 微信小程序|微信小程序学习之旅--第一个页面的制作
- 微信小程序|微信小程序云开发快速入门手册-告别切图仔的时刻到了
- Jquery|4.jquery(函数)
- 前端学习日志|JavaScript基础语法_JavaScript简单类型和复杂类型
- vue后台管理|vue 详情页返回列表,过滤查询条件保留
- javascript|three.js案例解析之代码实现morph动画
- 极客日常|【极客日常】vue3中实现Array数组更新的方法