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

Redirecting with parameters

You can also retain the parameters while redirecting:

{ path: '/de/Schuh/:size', redirect: '/en/shoe/:size' },

{ path: '/en/shoe/:size', component: Shoe }

Dynamic redirecting

This is the ultimate redirect. You can access the route the user is trying to access and decide

where you want to redirect him (you can't cancel the redirection though):

{ path: '/air', component: Air },

{ path: '/bags', name: 'bags', component: Bags },

{ path: '/super-shirt/:size', component: SuperShirt },

{ path: '/shirt/:size?', component: Shirt},

{ path: '/shirts/:size?',

redirect: to => {

const { hash, params, query } = to

if (query.colour === 'transparent') {

return { path: '/air', query: null }

}

if (hash === '#prada') {

return { name: 'bags', hash: '' }

}

if (params.size > 10) {

return '/super-shirt/:size'

} else {

return '/shirt/:size?'

}

}

}

Saving scrolling position when hitting back

In vue-router, there are two modes of navigation: hash and history. The default mode

and the one used in the previous recipes is previouslye. Traditionally, when you visit a

website, scroll down a bit and click on a link to another page; the new page displays from

the top. When you click on the browser's back button, the page displays from the previous

scrolled height and the link you just clicked on is visible.