vue路由前進(jìn)后退動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼

更新時(shí)間：2018年12月10日 12:16:25 作者：孟回頭

這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue-route-transition

vue router 切換動(dòng)畫(huà)

特性

模擬前進(jìn)后退動(dòng)畫(huà)
基于css3流暢動(dòng)畫(huà)
基于sessionStorage，頁(yè)面刷新不影響路由記錄
路由懶加載，返回可記錄滾動(dòng)條位置
前進(jìn)后退的判斷與路由路徑規(guī)則無(wú)關(guān)
支持任意基于Vue的UI框架

demo

手機(jī)掃碼

在線(xiàn)預(yù)覽

說(shuō)明

配套包含兩個(gè)組件

vue-route-transition 負(fù)責(zé)動(dòng)畫(huà)
router-layout 負(fù)責(zé)頁(yè)面排版。主要是解決transform動(dòng)畫(huà)，position:fixed異常問(wèn)題

像往常一樣使用

npm i vue-route-transition --save

main.js

import RouteTransition from 'vue-route-transition'
Vue.use(RouteTransition)

App.vue

<template>
 <vue-route-transition id="app">
 </vue-route-transition>
</template>

頁(yè)面，如果有吸附頭部，或吸附底部元素的情況下才需要使用router-layout組件

<template>
 <router-layout>
 <header slot="header">
  頭部導(dǎo)航
 </header>
 <div></div>
 <div></div>
 ...
 <footer slot="footer">
  <button>底部按鈕</button>
 </footer>
 </router-layout>
</template>

參考文件

Github

github

開(kāi)源協(xié)議

本項(xiàng)目基于 MIT 協(xié)議，請(qǐng)自由地享受和參與開(kāi)源。

總結(jié)

以上所述是小編給大家介紹的vue路由前進(jìn)后退動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式
這篇文章主要介紹了Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue頁(yè)面更新patch的實(shí)現(xiàn)示例
這篇文章主要介紹了vue頁(yè)面更新patch的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開(kāi)發(fā)中異步請(qǐng)求是非常常見(jiàn)的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下
2021-08-08
vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問(wèn)題
這篇文章主要介紹了vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
VSCode開(kāi)發(fā)UNI-APP 配置教程及插件
uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，今天通過(guò)本文給大家分享VSCode開(kāi)發(fā)UNI-APP 配置教程及插件推薦與注意事項(xiàng)，感興趣的朋友一起看看吧
2021-08-08
vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)
這篇文章主要介紹了vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2021-01-01
關(guān)于Vue中的watch監(jiān)視屬性
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對(duì)象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作,需要的朋友可以參考下
2023-04-04
Vue slot插槽作用與原理深入講解
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下
2023-01-01
Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼
這篇文章主要介紹了Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
使用Webpack提高Vue.js應(yīng)用的方式匯總(四種)
Webpack是開(kāi)發(fā)Vue.js單頁(yè)應(yīng)用程序的重要工具。下面通過(guò)四種方式給大家介紹使用Webpack提高Vue.js應(yīng)用，需要的的朋友參考下吧
2017-07-07