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管理员

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

本月创作热力图

最新评论
Mr.C
Mr.C
4月12日
个人建议,下个版本考虑将下载地址加密(防止采集)
Felix
Felix
4月1日
你好我想请教一下,为什么我php和redis都安装了,还是连接不上,一直显示未安装,旧插件文件也清理了
Mike
Mike
4月1日
当前页跳转一个页面,然后回退上一页,顶部进度条会缓慢加载,并且加载不完
评论于留言建议
Mike
Mike
4月1日
文章页划到最底部,侧边栏中切换作者发言会溢出
评论于留言建议
陇安辞
陇安辞
3月31日
guzhang
评论于关于本站