vue路由前進后退動畫效果的實現(xiàn)代碼

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

這篇文章主要介紹了vue路由前進后退動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

vue-route-transition

vue router 切換動畫

特性

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

demo

手機掃碼

在線預覽

說明

配套包含兩個組件

vue-route-transition 負責動畫
router-layout 負責頁面排版。主要是解決transform動畫，position:fixed異常問題

像往常一樣使用

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>

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

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

參考文件

Github

github

開源協(xié)議

本項目基于 MIT 協(xié)議，請自由地享受和參與開源。

總結

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

您可能感興趣的文章:

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