简介

使用router.addRoute()动态添加路由后正常点击没问题,一刷新就白屏。
原因:路由守卫放行的时候,动态路由组件还没有渲染完毕。

具体原因分析

根本原因就是组件没有渲染完毕路径就发生了跳转。侧面也说明了地址栏的响应速度大于路由,也就是地址栏已经跳转了但是路由却还没有渲染完毕,所以就是白屏。

实例说明

在这里插入图片描述
当再次刷新时,没有用户信息,所以需要再次获取,获取到之后就直接next(),问题就在这里,直接就放行了,但是组件还没有渲染完毕就放行了。必然是白屏。

解决方法

在这里插入图片描述
next()方法里面使用...to,等待组件渲染完毕再放行即可。replace:true这个可加可不加。

话外语

有一点我认为远比解决这个问题还重要,理解了会对next()的理解更上一层楼。
大家有没有疑惑?为什么用户名不持久化存储,每次都需要发请求获取,其实这是为了制造出口,别懵,听我到来。
在这里插入图片描述
这是完整的判断,有用户名直接放行,没有用户名发请求在获取一遍。他的顺序是刷新之后没有用户名,走else,等待to组件渲染完毕,完后重定向,继续进入路由守卫,此时有了用户名直接放行,完成退出循环。
所以你可以使用next(...to)解决白屏,但是务必要设置一个出口,也就是next(),如果没有这个出口就会进入死循环

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐