vue-router 路由动画 vue router tra
特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage，页面刷新不影响路由记录 路由懒加载，返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意基于Vue的UI框架 demovue router 切换动画
在线预览
说明配套包含两个组件
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> // keepAlive默认true，开启缓存可以记录滚动条位置 // 同时支持路由配置meta:{keepAlive:false} 关闭某个页面缓存 <vue-route-transition id="app" :keepAlive="true"> </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>
如果存在子路由,需手动设置router-layout的id属性，滚动条定位作用。
<router-layout id="__index"> <router-view></router-view> <van-tabbar slot="footer" :fixed="false" v-model="active"> <van-tabbar-item to="/" icon="shop">标签</van-tabbar-item> <van-tabbar-item to="/tab" icon="chat">标签</van-tabbar-item> <van-tabbar-item to="/swipe" icon="records">标签</van-tabbar-item> </van-tabbar> </router-layout>
github
开源协议本项目基于 MIT 协议，请自由地享受和参与开源。
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
