Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

How it works...

Wrapping the whole inside a transition tag will perform the same

transition for all the components.

If we want a different transition for every component, we have an alternate option: we have

to wrap the individual components inside transitions themselves.

Let's say, for example, that we have two transitions: spooky and delicious. We want to
apply the first when the Home component appears, and the second when the Menu

component appears.

We need to modify our components, as follows:

const Home = { template: `

<transition name="spooky">

<div>Welcome to Ghost's</div>

</transition>

` }

const Menu = { template: `

<transition name="delicious">

<div>Today: insisible cookies!</div>

</transition>

` }

Managing errors for your routes

It does not make much sense to go to a link if the page we go to is not found or is not
working. Traditionally, we are presented with an error page when this happens. In an SPA,

we are more powerful and we can prevent the user from going there altogether, displaying
a little courtesy message stating that the page is not available. This greatly enhances the UX

since the user can immediately take another action without the need to go back.

Getting ready

In order to follow along, you should complete the Fetching data before switching route recipe.

This recipe will build up on top of it and I'll assume that you already have all the relevant

code in place.