关于在 vue 3 和 vue router 中使用 transition 过渡动效的 mode 属性导致页面跳转空白的问题

发布时间 2023-03-24 17:27:24作者: FreezeNow

先放结论:不要在路由组件的 template 块中使用多个根标签,注释也不行

今天碰到一个奇葩的问题,后端告诉我说,进入特定页面后,跳转其他页面均会白屏,刷新后就会加载。

一开始我以为是菜单的问题,搞鼓了半天,发现没什么问题。之后我又以为是路由的问题,发现只要移除了 transition 的 mode,页面就能正常加载了。但是这样太突兀了,用户体验不是很好。

于是我直接粗暴的回退代码,终于发现只要移除了一个根标签的弹窗,页面就正常了。配合我搜索到的资料,得出一个奇怪的结论:

路由组件的 template 块中使用多个根标签与 transition 过渡动效的 mode 属性不兼容

只能说,真是一个奇葩的 bug。