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

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

本月创作热力图

最新评论
西风
西风
3月7日
暂时不需要也能跑
Kevin
Kevin
3月6日
请教,小网站,1000ip不到,小主机,2c4g,到底 redis 还是 macached 合适啊
hfloke
hfloke
3月1日
新版本安装更新后,页面有问题哦
丙氨酸
丙氨酸
2月27日
测试
评论于关于本站
RiseForever
RiseForever
2月23日
听说新主题发布了,来测试下评论区。