Vue Router 切换闪动问题

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

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

Vue自带一个动画组件

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

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

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

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