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

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

本月创作热力图

少
多
最新评论
卢温白
卢温白
10月10日
咨询 AeroCore 主题: 1、能否制作两套独立归档模板,分别分配给两个父栏目,各自下属全部子分类?一套分类网格一行 10 个卡片,另一套分类列表一行仅显
评论于关于本站
卢温白
卢温白
10月10日
咨询 CoreNext 主题: 1、能否制作两套独立归档模板,分别分配给两个父栏目,各自下属全部子分类?一套分类网格一行 10 个卡片,另一套分类列表一行仅显
评论于留言建议
jo
jo
10月9日
为什么后台不能更新主题,提示已经最新版。当前版本1.4.9,我看网站显示版本都到1.5.2了
Tom
Tom
10月8日
AeroCore 的按需加载确实做得好,Vite 构建后的首屏比之前 CoreNext 快不少。不过上面 Mike 说的进度条问题我这边也能稳定复现:从留言页点
评论于留言建议
Shaw
Shaw
10月2日
需要邀请码注册功能,有了马上下单