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

Only by adding that redirect we did save the day. Now, you will be presented with the

sales page whenever you visit the home page.

How it works...

When the root route is matched, the Home component won't be loaded. The path of /last-

year-sales will be matched instead. We can also omit the component altogether since it

will never be loaded:

{ path: '/', redirect: '/last-year-sales' }

There's more...

Redirecting in vue-router is more powerful than what we just saw. Here, I will try to enrich
the application we just created with more functionality from redirecting.

Redirecting to 404s

Redirecting not found pages is done by adding a catch-all as the last route. It will match
everything that is not matched by the other routes:

{ path: '/404', component: NotFound },

{ path: '*', redirect: '/404' }

Named redirecting

Redirection can be combined with named routes (refer to the Using named dynamic

routes recipe). We can specify the destination by name:

...

{ path: '/clothes', name: 'listing', component: Clothes },

{ path: '/shoes', redirect: { name: 'listing' }}