亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2018年12月10日 12:16:25   作者：孟回頭  
這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue-route-transition

vue router 切換動(dòng)畫

特性

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

demo

 

手機(jī)掃碼

在線預(yù)覽

說(shuō)明

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

  • vue-route-transition 負(fù)責(zé)動(dòng)畫
  • router-layout 負(fù)責(zé)頁(yè)面排版。 主要是解決transform動(dòng)畫，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)畫效果的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼

    vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼

    這篇文章主要介紹了vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-07-07
  • vue+eslint+vscode配置教程

    vue+eslint+vscode配置教程

    這篇文章主要介紹了vue+eslint+vscode配置教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • Vue.js中組件中的slot實(shí)例詳解

    Vue.js中組件中的slot實(shí)例詳解

    這篇文章主要介紹了Vue.js中組件中的slot實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-07-07
  • vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址

    vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址

    這篇文章主要給大家介紹了關(guān)于vue3頁(yè)面組件中怎么獲取上一個(gè)頁(yè)面的路由地址的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-02-02
  • 在Vue.js中使用Mixins的方法

    在Vue.js中使用Mixins的方法

    本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實(shí)用的編程方式，可以使代碼變得容易理解，有興趣的一起來(lái)了解一下
    2017-09-09
  • Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證的流程

    Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證的流程

    這篇文章主要介紹了Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證?,Vue.js?和?Django?編寫的前后端項(xiàng)目中，實(shí)現(xiàn)了基于?Token?的身份驗(yàn)證機(jī)制，其他前后端框架的?Token?實(shí)現(xiàn)原理與本文一致，需要的朋友可以參考下
    2022-08-08
  • vue如何實(shí)現(xiàn)表單多選并且獲取其中的值

    vue如何實(shí)現(xiàn)表單多選并且獲取其中的值

    這篇文章主要介紹了vue如何實(shí)現(xiàn)表單多選并且獲取其中的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • 利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能示例代碼

    利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能示例代碼

    本篇文章主要介紹了利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
    2017-01-01
  • socket io與vue-cli的結(jié)合使用的示例代碼

    socket io與vue-cli的結(jié)合使用的示例代碼

    這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例

    vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例

    今天小編就為大家分享一篇vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08

最新評(píng)論