Vue Router 切換閃動問題
Vue中使用路由。在切換的時候,由于頁面重新渲染,會先移除原來的路由,再顯示新路由,首次加載的時候,就會閃動。
可以使用動畫,設置淡入淡出。這樣就可以避免閃動了。
Vue自帶一個動畫組件
<Transition>
是一個內置組件,無需注冊。它可以將進入和離開動畫應用到通過默認插槽傳遞給它的元素或組件上。進入或離開可以由以下的條件之一觸發:
- 由?
v-if
?所觸發的切換 - 由?
v-show
?所觸發的切換 - 由特殊元素?
<component>
?切換的動態組件 - 改變特殊的?
key
?屬性
要簡單的話,就只需要設置key觸發。key設置為路由的完整路徑,這樣可以保證每個路由都不一樣
<transition :key="$route.fullPath">
<router-view></router-view>
</transition>
版權聲明:
作者:applek
鏈接:http://www.yydfqli.cn/vueshandong.html
文章版權歸作者所有,未經允許請勿轉載。
THE END