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