Vue Router 切换闪动问题

Vue中使用路由。在切换的时候,由于页面重新渲染,会先移除原来的路由,再显示新路由,首次加载的时候,就会闪动。

可以使用动画,设置淡入淡出。这样就可以避免闪动了。

Vue自带一个动画组件

<Transition> 是一个内置组件,无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发:

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素 <component> 切换的动态组件
  • 改变特殊的 key 属性

要简单的话,就只需要设置key触发。key设置为路由的完整路径,这样可以保证每个路由都不一样

<transition :key="$route.fullPath">
  <router-view></router-view>
</transition>

 

上一篇 CoreDownload - WP下载增强插件 1.0.6
下一篇 解决 WordPress 后台仪表盘慢问题
目录
applek

applek管理员

个人说明在个人中心里面设置

本月创作热力图

最新评论
hui
hui
8月19日
能否支持微信第三方登录啊?
Fiee
Fiee
7月21日
我网站基本上都装了,速度确实有所提升,还免费。我不喜欢白嫖,加你QQ没同意,网站也没有打赏通道 想支持一下的。
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?