vue-router-view-transition
A transition wrapper for router-view that is compatible with scrollBehavior
Installation
npm install vue-router-view-transition# or yarn add vue-router-view-transition
Usage
This library exports one component and one function. You need to use both:
First, you can either globally install the component RouterViewTransition
:
Vue
or import it locally in any Vue component:
components: RouterViewTransition
Then you should replace your router-view
with this router-view-transition
:
<router-view-transition transition="fade" mode="out-in" />
Here the transition
prop refers to the name of the transition (prop named name
for the transition
component) while the mode
is exactly the same as the prop with the same name in the transition
component.
Then you must import the waitForTransition
function and wrap your scrollBehavior
function:
// probably your router.js fileconst router = mode: 'history' routes: // your routes scrollBehavior:
Note: You may also want to enable manual scroll restoration:
historyscrollRestoration = 'manual'
Related
- Vue Router: https://github.com/vuejs/vue-router