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

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

本月创作热力图

最新评论
38658469
38658469
3月31日
guzhang
评论于关于本站
mchsj
mchsj
3月20日
希望增加文章目录
评论于留言建议
吴彦祖
吴彦祖
3月14日
很期待优秀的主题作品qiang
xxx
xxx
3月14日
密码是多少
西风
西风
3月7日
暂时不需要也能跑