vue路由前进后退动画效果的实现代码
更新时间：2018年12月10日 12:16:25 作者：孟回头
这篇文章主要介绍了vue路由前进后退动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-route-transition
vue router 切换动画
特性
- 模拟前进后退动画
- 基于css3流畅动画
- 基于sessionStorage，页面刷新不影响路由记录
- 路由懒加载，返回可记录滚动条位置
- 前进后退的判断与路由路径规则无关
- 支持任意基于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
开源协议
本项目基于 MIT 协议，请自由地享受和参与开源。
总结
以上所述是小编给大家介绍的vue路由前进后退动画效果的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Vuex state中同步数据和异步数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue页面更新patch的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,这篇文章主要给大家介绍了关于Vue3异步数据加载组件suspense的使用方法,suspense中文含义是悬念的意思,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了vue中使用element组件时事件想要传递其他参数的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，今天通过本文给大家分享VSCode开发UNI-APP 配置教程及插件推荐与注意事项，感兴趣的朋友一起看看吧2021-08-08
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时，回调函数自动调用，进行相关操作,需要的朋友可以参考下2023-04-04
插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue验证码60秒倒计时功能简单实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
Webpack是开发Vue.js单页应用程序的重要工具。下面通过四种方式给大家介绍使用Webpack提高Vue.js应用，需要的的朋友参考下吧2017-07-07
最新评论