Vue.js使用過渡動畫制作路由跳轉(zhuǎn)動畫

keep-live :切換過的視圖會被緩存起來,如果不加keep-live 每次都會去重新請求一次,這樣比較消耗資源

<transition name="fade">
 <keep-alive>
 <router-view></router-view>
 </keep-alive></transition>

注意:

當(dāng)我們切換導(dǎo)航的時候,當(dāng)前的link標(biāo)簽的類會被賦值為class="router-link-active",這是一個很有用的操作.

給router-link添加active-class="active" 用于修改樣式

<ul>
 <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
 {{ item.name }} </router-link></ul>css部分
選種和hover時,顯示藍(lán)色
.product-board li.active,
.product-board li:hover {
 background: #4fc08d;
 color: #fff;
}
......

router-view的keep-alive屬性,保證該視圖只渲染一次,來回切換不重復(fù)渲染

<router-view :seller="seller" keep-alive></router-view>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

Vue.js路由的其他操作

Vue.js的嵌套路由(子路由)

Vue.js的自定義指令 directive

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com