Single Page Applications Chapter 15It would be better to add a new hook to the router:
router.afterEach((to, from) => {
NProgress.done()
})Since the done function is idempotent, we can call it as many times as we want. This will,
therefore, not modify the behavior of our application and will ensure that even if future
developers forget to close the progress bar, it will disappear by itself once the route has
changed.
How to redirect to another route
There are infinite reasons you may wish to redirect the user. You may want the user to log
in before accessing a page, or maybe a page has moved and you want your user to take
note of the new link. In this recipe, you will redirect the user to a new home page as a way
to quickly modify the website.
Getting ready
This recipe will only use basic knowledge about vue-router. If you have completed
the Creating a SPA with vue-router recipe, you are good to go.
How to do it...
Suppose that we have an online clothing shop.
This will be the HTML layout of the site:
<div id="app">
<h1>Clothes for Humans</h1>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/clothes">Clothes</router-link></li>
</ul>
<router-view></router-view>
</div>