使用vue如何防止页面跳转出现闪烁?

我想达到的效果:https://eggjs.org/zh-cn/basic...

这个页面, 地址栏的地址是变化的,但是整个页面,左侧菜单看起来好像固定不变一样。
看起来就像使用iframe的效果。

我的项目使用vue在客户端渲染,当页面没有渲染之前,整个页面是空白的,渲染之后才显示。

点击新页面的效果就是闪一下的感觉。这对用户来说,体验很不好。

我现在的解决方案就是。使用Nuxt,在服务端渲染完毕再输出到前端。

不过我是后台使用的,不需要考虑什么seo效果。用这个又觉得大材小用了。

有没有其他好点的解决方案啊?

阅读 9.9k
4 个回答

最终,我使用Nuxt解决了。
Nuxt不仅仅解决seo的问题,也可以加快首屏加载的速度,这个是最需要的。


这答案居然有2个踩。
你们既然踩了,又不给更好的答案。
我使用Nuxt重构了项目,问题的确得到解决了。

最外层div加上<div v-cloak></div>,然后css样式里面[v-cloak]{display:none}

以前也遇到同样的问题,原因是当前路由还没完全销毁前下一个路由就出现了就被挤到下面去,所以就出现了闪烁的情况; 一种解决方法是用定位布局, 一种方法可以使用过滤。 还有一种可能是你的布局问题,比如超出没有overflow

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题