How To Set Up Vue Routes Or Override Back Button To Function Like An App
Solution 1:
That sounds like it would defeat the original purpose of navigating between historical/visited pages (rather than going up one level in the routes).
I would instead add a dedicated, in-app back button for this (like Google apps do have one); otherwise, you might have to try and intercept the browser's default behavior for that particular button, by listening to the popstate
event of the Window
interface which is fired when the active history entry changes. But if you have to, there is a workaround for that with Global Before (navigation) Guards.
With an in-app back (or technically "up") button I mentioned earlier, you could use In-Component Guards.
For example, given the following routes
settings...
const router = newRouter({
mode: 'history',
routes: [
{
path: '/profile/:id',
name: 'profile',
component: Profile,
children: [{
path: ':contact_type/contacts:contact_id',
name: 'contact',
component: Contact
}]
}
]
})
...you would directly define the route navigation guards inside the route component (e.g. Contacts.vue
):
<template><div><router-link:to="{ name: 'profile' }"><- back to profile</router-link>
Some contact information.
</div></template><script>exportdefault {
beforeRouteLeave(to, from, next) {
if (from.name === 'contact' && to.name !== 'profile') {
next({
name: 'profile',
params: {
id: from.params.id
}
});
}
else {
next();
}
}
}
</script>
Not necessarily the best approach, but that should work.
Post a Comment for "How To Set Up Vue Routes Or Override Back Button To Function Like An App"