Table of Contents
URL: https://www.progressiverobot.com/vuejs-vue-routing-transitions/
Last time we covered advanced <^>Vue Router<^> topics we discussed Navigation Guards and Redirects. This time we'll be tackling how to implement Vue Router Transitions.
We've already covered <^>Vue<^> Transitions in Understanding Vue.js Transitions, so we'll use that as a starting point. Combining <^>Vue Router<^> with <^>transitions<^> will allow us to customize the user's experience while they navigate throughout our app with custom styling or animations. This is important with apps that grow large with many complex routes.
Setup
Since this is another post about advanced <^>Vue Router<^> techniques, we'll assume you're already familiar with the basic setup. However, let's define a starting point that we'll use for the rest of the post:
# Yarn
$ yarn add vue-router
# or npm
$ npm install vue-router --save
[label main.js]
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import Swamp from './components/Swamp';
import Gator from './components/Gator';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: '/swamp', component: Swamp },
{ path: '/gator', component: Gator }
]
});
new Vue({
render: h => h(App),
router
}).$mount('#app')
[label App.vue]
<template>
<div id="app">
<div class="nav">
<router-link to="/swamp">Swamp</router-link> |
<router-link to="/gator">Gator</router-link>
</div>
<hr />
<div class="router-view">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default { name: 'App' }
</script>
[label components/Swamp.vue]
<template>
<div>Welcome to the Swamp!</div>
</template>
<script>
export default { name: 'Swamp' }
</script>
[label components/Gator.vue]
<template>
<div>Howdy, Gator!</div>
</template>
<script>
export default { name: 'Gator' }
</script>
Router Transitions
The <^>Vue Router<^> allows us to wrap our <router-view> component with the <transition> component. This enables <^>transitions<^> when navigating both to and from our route components.
[label App.vue]
<template>
<div id="app">
<div class="nav">
<router-link to="/swamp">Swamp</router-link> |
<router-link to="/gator">Gator</router-link>
</div>
<hr />
<div class="router-view">
<transition name="slither">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<script>
export default { name: 'App' }
</script>
<style>
.slither-enter-active, .slither-leave-active {
transition: transform 1s;
}
.slither-enter, .slither-leave-to {
transform: translateX(-100%);
}
.slither-enter-to, .slither-leave {
transform: translateX(0);
}
</style>
Now you'll notice the Gator and Swamp components slither in and out from the left when navigating!
Dynamic Transitions
We can also define router transitions dynamically. This would allow us to add a <^>transition<^> only when navigating away from /swamp:
[label Script: App.vue]
export default {
name: 'App',
data () {
return { transitionName: null }
},
watch: {
'$route' (to, from) {
if (from.path === '/swamp') {
this.transitionName = 'drain';
} else {
this.transitionName = 'slither';
}
}
}
}
Now let's define the drain transition:
[label Style: App.vue]
.slither-enter-active, .slither-leave-active {
transition: transform 1s;
}
.slither-enter, .slither-leave-to {
transform: translateX(-100%);
}
.slither-enter-to, .slither-leave {
transform: translateX(0);
}
.drain-enter-active, .drain-leave-active {
transition: transform 1s;
}
.drain-enter, .drain-leave-to {
transform: translateY(100%);
}
.drain-enter-to, .drain-leave {
transform: translateY(0);
}
Now we'll see that only when leaving Swamp we'll see it drain away 🤓.
Per-route transitions
We could also apply transitions on a per-route basis. We can accomplish this by wrapping a route component with <transition>. Let's say we modified Gator as follows (making sure to remove the original <transition> in App.vue):
[label components/Gator.vue]
<template>
<transition name="slither">
<div>Howdy, Gator!</div>
</transition>
</template>
<script>
export default { name: 'Gator' }
</script>
Now, only when navigating to /gator will we see our slither transition in action.
Wrapping Up
<^>Vue Router<^> transitions are great for adding next-level user experiences. Not only can we make our apps look cool, but transitions can also aid in helping the user navigate a complex router setup. If we were implementing a wizard or a book, we could have components transition to the left or right as if the user were turning pages. This helps the user remember where they are in your app!
