vue-route-transition

Vue Router switch animation

features

  • Simulate forward and backward animation
  • Css3 based smooth animation
  • Based on sessionStorage, page refresh does not affect routing records
  • Route lazy load, return recordable scrollbar position
  • The forward or backward judgment has nothing to do with the routing path rule
  • Support for any VUe-based UI framework

demo

Mobile phones and code

The online preview

instructions

A set consists of two components

  • vue-route-transitionResponsible for the animation
  • router-layoutResponsible for page layout. Mainly to solvetransformAnimation,position:fixedAbnormal problem

Use as usual

npm i vue-route-transition --save
Copy the code

main.js

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

App.vue

<template>KeepAlive :{keepAlive:false} Disables a page cache<vue-route-transition id="app" :keepAlive="true">
  </vue-route-transition>
</template>
Copy the code

Use the Router-Layout component only if you have a header or a bottom element attached to the page

<template>
  <router-layout>
    <header slot="header">The head of navigation</header>
    <div></div>
    <div></div>.<footer slot="footer">
      <button>Button at the bottom of the</button>
    </footer>
  </router-layout>
</template>
Copy the code

If there are child routes, manually set the ROUter-layout ID attribute and scroll bar location function.

<router-layout id="__index">
  <router-view></router-view>
  <van-tabbar slot="footer" :fixed="false" v-model="active">
    <van-tabbar-item to="/" icon="shop">The label</van-tabbar-item>
    <van-tabbar-item to="/tab" icon="chat">The label</van-tabbar-item>
    <van-tabbar-item to="/swipe" icon="records">The label</van-tabbar-item>
  </van-tabbar>
</router-layout>
Copy the code

github

Open source licenses

This project is based on the MIT protocol, please feel free to enjoy and participate in open source.