Single Page Applications Chapter 15How it works...
Even if we changed all of our links, we cannot control how other entities are linked to our
page. For search engines, such as Google, there is no way to tell them to remove their link
to the old page and use the new one. This means that if we weren't to use aliases, we may
have a lot of bad publicity in the form of broken links and 404 pages; in some cases, even
from advertisers, we are paying to link to a non-existent page.
Adding transitions between your routes
We explored transitions in detail in Transitions and Animations. Here, we will use them
when changing routes instead of changing elements or components. The same observations
apply here as well.
Getting ready
Before trying this recipe, I highly suggest that you complete some recipes in Transitions and
Animations, as well as this one. This recipe is a mixture of concepts learned up to now.
How to do it...
In this recipe, we will build a website for a restaurant for ghosts. It won't be much different
from the website of a regular restaurant, except for the requirements that the pages must
fade instead of appearing instantly.
Let's put down some HTML layout, shall we:
<div id="app">
<h1>Ghost's Restaurant</h1>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/menu">Menu</router-link></li>
</ul>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>