Creating custom back button functionality in Vue.js to mimic an app-like experience with routing

Question

Creating custom back button functionality in Vue.js to mimic an app-like experience with routing

As I work on my cordova Vue app, I often encounter deeper links like this:

/profile/:id/:contact_type/contacts:contact_id

Usually, you would start on /profile/:id and then navigate to

/profile/:id/:contact_type/contacts:contact_id

by clicking a link.

The standard router.go(-1) function works well if you were on the profile page initially. However, if you come from a different page, such as /settings/:id due to a notification or other trigger, the back button should function more like an Up button. Pressing back on

/profile/:id/:contact_type/contacts:contact_id

should take you to /profile/:id, not /settings/:id.

How can I achieve this? I've attempted various methods like splitting the current route by /, removing the last segment, then rejoining and pushing to that route. However, this approach doesn't work well with parameters, especially when there are multiple ones.

const path = router.currentRoute.path
const URLSplit = path.split('/')
URLSplit.length = URLSplit.length - 1
const newTarget = URLSplit.join('/')
if (newTarget) {
  router.push(newTarget)
} else {
  router.push('/home')
}

I also explored using child routes, but that requires a router-view in each page, which isn't ideal for my needs.

I have already intercepted the back button operation, but I am curious if there is a way to configure Vue to handle this type of back navigation automatically, or if there's a specific setup needed in the router, or perhaps a function that can determine the current route and navigate up to it?

javascript vue.js vue-router

Answer 1

Answer №1

It seems that implementing a back button within the app would go against the original purpose of navigating between historical/visited pages, rather than simply moving up one level in the routes.

Instead of trying to alter the browser's default behavior for the back button, consider adding a dedicated in-app back button, similar to what Google apps have. This can be achieved by listening to the popstate event of the Window interface, which is triggered when the active history entry changes. Alternatively, you can explore a workaround using Global Before (navigation) Guards.

An in-app back button, or technically an "up" button, can utilize In-Component Guards.

For instance, within the routes configuration:

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/profile/:id',
      name: 'profile',
      component: Profile,

      children: [{
        path: ':contact_type/contacts:contact_id',
        name: 'contact',
        component: Contact
      }]
    }
  ]
})

You can define the route navigation guards directly inside the corresponding 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>
  export default {
    beforeRouteLeave(to, from, next) {
      if (from.name === 'contact' && to.name !== 'profile') {
        next({
          name: 'profile',
          params: {
            id: from.params.id
          }
        });
      }
      else {
        next();
      }
    }
  }
</script>

While not necessarily the optimal solution, this approach should suffice.

Answer 2

It seems that implementing a back button within the app would go against the original purpose of navigating between historical/visited pages, rather than simply moving up one level in the routes.

Instead of trying to alter the browser's default behavior for the back button, consider adding a dedicated in-app back button, similar to what Google apps have. This can be achieved by listening to the popstate event of the Window interface, which is triggered when the active history entry changes. Alternatively, you can explore a workaround using Global Before (navigation) Guards.

An in-app back button, or technically an "up" button, can utilize In-Component Guards.

For instance, within the routes configuration:

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/profile/:id',
      name: 'profile',
      component: Profile,

      children: [{
        path: ':contact_type/contacts:contact_id',
        name: 'contact',
        component: Contact
      }]
    }
  ]
})

You can define the route navigation guards directly inside the corresponding 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>
  export default {
    beforeRouteLeave(to, from, next) {
      if (from.name === 'contact' && to.name !== 'profile') {
        next({
          name: 'profile',
          params: {
            id: from.params.id
          }
        });
      }
      else {
        next();
      }
    }
  }
</script>

While not necessarily the optimal solution, this approach should suffice.

Creating custom back button functionality in Vue.js to mimic an app-like experience with routing

Answer №1

Similar questions

Can D3 transform regions into drinking establishments?

What are the steps to customizing a package on atmospherejs.com within meteor.js?

Incorporating Products from an Iframe into the Cart on Woocommerce

Ways to incorporate a php file based on the user's selection

Error: The data from the intermediate value cannot be parsed using the parseFromString() method and replaced with another value,

Having trouble with the $.get function in AJAX with Rails 4? It seems

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

"Encountering a Javascript issue while trying to apply a CSS class to a

Creating dynamic height based on width using JavaScript

A fatal error has occurred in Node as it is unable to set headers after

Initiate an AJAX call with various data formats included

Transforming the color of a globe from black to white with gio js

You cannot access the property 'subscribe' on a void type in Angular 2

Proceed the flow of event propagation using the react-aria button element

Extract website addresses from a text and store them in an array

Check the status of the audio source URL using JavaScript

I am unable to incorporate added height into the component

What steps should I take to set up nuxt 3 in such a way that it functions properly when I attempt to directly access a static page created through the command

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

I am struggling to comprehend the code for a PHP form that triggers a JS OnUpdate event, which then uses AJAX to retrieve data from MySQLi