How To Set Up Vue Routes Or Override Back Button To Function Like An App

I am building a cordova Vue app. In many cases there is deeper links like this /profile/:id/:contact_type/contacts:contact_id Where you would first be on /profile/:id and then clic

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' }">&lt;- 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.