Trigger API request only upon entrance of a specific Vue Router child route

Question

Trigger API request only upon entrance of a specific Vue Router child route

Is there a way to trigger a store action in Vue2 and vue router 3x whenever a specific child route is accessed, regardless of whether it is through a button click or the browser back/forward buttons?

I have the need to make an API call every time a particular child route is visited. While my current code functions properly when navigating through buttons, it breaks when users use the browser's navigation buttons.

Let me explain the issue...

The structure of my router is as follows:

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/browse/food/:foodId',
      name: 'Food',
      component: foodComp,
      children: [
        {
          path: ':routeTitle',
          name: 'FoodDescription',
          component: foodDescriptionComp,
          props: {
            viewMode: 'TEXT',
          },
        },
        {
          path: ':routeTitle',
          name: 'FoodImage',
          component: foodDescriptionComp,
          props: {
            viewMode: 'IMAGE',
          },
        },
        {
          path: ':routeTitle/food-translation',
          name: 'FoodTranslation',
          component: foodTranslationComp,
        },
      ],
    },
    ...lotsOfOtherRoutes,
  ],
});

...the foodDescriptionComp includes pagination for switching between different foods triggered by clicking the "next page" (or page number) button. The method for this functionality is defined as follows:

methods: {
  async switchPage(pageNumber, foodIdForPageSelection) {
    this.$router.push({
      name: 'FoodDescription',
      params: { foodId: foodIdForPageSelection },
    });

    await this.loadFoodByPage({
      catalogId: this.catalogId,
      pageNumber,
    });
  }
}

When a user uses the browser's back button, the loadFoodByPage method is not triggered. I've attempted several solutions:

One approach was to use the beforeEnter function and move the loadFoodByPage logic there, but it only fires on the initial page load.

Another potential solution could involve using beforeEach, but with hundreds of routes in our application, it seems excessive to add logic specifically for one child route that would be checked on every single page.

Although I tried a workaround involving the following hacky solution, it results in maintaining only one step in the history when pressing the back button - meaning if I navigate from login to food 1, then proceed to 2, 3, 4, and press back in the browser, it will go back to page 3 before redirecting to the login page. Even if this method worked, it goes against best practices.

// Reload page on browser back/forward button press
window.onpopstate = function () {
  window.location.reload();
};

javascript vue.js vuejs2 vue-router

Answer 1

Answer №1

This code should work in theory, although it has not been tested. The concept is that this function will be activated every time there is a route change, and the page number will be determined by the URL. If no page number is found in the URL, it defaults to 1.

methods: {
  switchPage(pageNumber, foodIdForPageSelection) {
    this.$router.push({
      name: 'FoodDescription',
      params: { foodId: foodIdForPageSelection },
      query: { pageNumber }
    })
},
watch:{
  '$route' (to, from){
    if(to.name === 'FoodDescription') {
      this.loadFoodByPage({
        catalogId: this.catalogId,
        pageNumber: this.pageNumber ? this.pageNumber : 1,
    });
    }
  }
},
computed: {
  pageNumber: () => {
      return this.$route.query.pageNumber;
    }
  }
}

Answer 2

This code should work in theory, although it has not been tested. The concept is that this function will be activated every time there is a route change, and the page number will be determined by the URL. If no page number is found in the URL, it defaults to 1.

methods: {
  switchPage(pageNumber, foodIdForPageSelection) {
    this.$router.push({
      name: 'FoodDescription',
      params: { foodId: foodIdForPageSelection },
      query: { pageNumber }
    })
},
watch:{
  '$route' (to, from){
    if(to.name === 'FoodDescription') {
      this.loadFoodByPage({
        catalogId: this.catalogId,
        pageNumber: this.pageNumber ? this.pageNumber : 1,
    });
    }
  }
},
computed: {
  pageNumber: () => {
      return this.$route.query.pageNumber;
    }
  }
}

Answer 3

Answer №2

I've experimented with a few strategies to tackle this issue:

Initially, I attempted incorporating beforeEnter and relocating loadFoodByPage to the beforeEnter, but it only triggered during the initial page load.

Using beforeEach seems like a potential solution, but considering the extensive number of routes in our application, it appears impractical to add logic specifically for one child route that would be evaluated on every single page.

Indeed, you have the option to utilize either beforeEnter or beforeEach to address this issue.

beforeEnter - as previously attempted, this method showed limitations by only functioning on the initial page load. The reason being that when returning to a route using the browser's back button, the beforeEnter is not re-evaluated.

beforeEach - this executes before entering each route, including when navigating back with the browser's back button. However, concerns about the performance impacts of adding this guard to all routes remain.

A possible resolution could involve implementing a dynamic module for your route. This approach allows you to apply the beforeEnter solely to the required routes without necessitating its inclusion in every route.

For example;

// Dynamic route module
const foodDescriptionModule = {
 beforeEnter: async (to, from, next) => {
   // Implement API call here
   await store.dispatch('loadFoodByPage', {
     catalogId: to.params.catalogId,
     pageNumber: to.params.pageNumber,
   });

   next();
 },
 children: [
   {
     path: ':routeTitle',
     name: 'FoodDescription',
     component: foodDescriptionComp,
     props: {
       viewMode: 'TEXT',
     },
   },
   {
     path: ':routeTitle',
     name: 'FoodImage',
     component: foodDescriptionComp,
     props: {
       viewMode: 'IMAGE',
     },
   },
   {
     path: ':routeTitle/food-translation',
     name: 'FoodTranslation',
     component: foodTranslationComp,
   },
 ],
};

// Main router configuration
const router = new Router({
 mode: 'history',
 routes: [
   {
     path: '/browse/food/:foodId',
     name: 'Food',
     component: foodComp,
     children: [foodDescriptionModule],
   },
   ...lotsOfOtherRoutes,
 ],
});

In this setup, the beforeEnter guard is defined within a separate module (foodDescriptionModule) and subsequently included in the children array of the primary route arrangement. Therefore, the beforeEnter guard exclusively applies to the routes specified in foodDescriptionModule, rather than affecting all routes across your application.

Note that this assumes the existence of the loadFoodByPage action in your vuex store. If not, adjustments will be necessary. Ensure to import the vuex store at the beginning of your file with import store from './store'. By following this approach, you should be able to execute a store action whenever a particular child route is accessed, regardless of whether it was reached through user interaction or browser navigation buttons.

Answer 4

I've experimented with a few strategies to tackle this issue:

Initially, I attempted incorporating beforeEnter and relocating loadFoodByPage to the beforeEnter, but it only triggered during the initial page load.

Using beforeEach seems like a potential solution, but considering the extensive number of routes in our application, it appears impractical to add logic specifically for one child route that would be evaluated on every single page.

Indeed, you have the option to utilize either beforeEnter or beforeEach to address this issue.

beforeEnter - as previously attempted, this method showed limitations by only functioning on the initial page load. The reason being that when returning to a route using the browser's back button, the beforeEnter is not re-evaluated.

beforeEach - this executes before entering each route, including when navigating back with the browser's back button. However, concerns about the performance impacts of adding this guard to all routes remain.

A possible resolution could involve implementing a dynamic module for your route. This approach allows you to apply the beforeEnter solely to the required routes without necessitating its inclusion in every route.

For example;

// Dynamic route module
const foodDescriptionModule = {
 beforeEnter: async (to, from, next) => {
   // Implement API call here
   await store.dispatch('loadFoodByPage', {
     catalogId: to.params.catalogId,
     pageNumber: to.params.pageNumber,
   });

   next();
 },
 children: [
   {
     path: ':routeTitle',
     name: 'FoodDescription',
     component: foodDescriptionComp,
     props: {
       viewMode: 'TEXT',
     },
   },
   {
     path: ':routeTitle',
     name: 'FoodImage',
     component: foodDescriptionComp,
     props: {
       viewMode: 'IMAGE',
     },
   },
   {
     path: ':routeTitle/food-translation',
     name: 'FoodTranslation',
     component: foodTranslationComp,
   },
 ],
};

// Main router configuration
const router = new Router({
 mode: 'history',
 routes: [
   {
     path: '/browse/food/:foodId',
     name: 'Food',
     component: foodComp,
     children: [foodDescriptionModule],
   },
   ...lotsOfOtherRoutes,
 ],
});

In this setup, the beforeEnter guard is defined within a separate module (foodDescriptionModule) and subsequently included in the children array of the primary route arrangement. Therefore, the beforeEnter guard exclusively applies to the routes specified in foodDescriptionModule, rather than affecting all routes across your application.

Note that this assumes the existence of the loadFoodByPage action in your vuex store. If not, adjustments will be necessary. Ensure to import the vuex store at the beginning of your file with import store from './store'. By following this approach, you should be able to execute a store action whenever a particular child route is accessed, regardless of whether it was reached through user interaction or browser navigation buttons.

Trigger API request only upon entrance of a specific Vue Router child route

Answer №1

Answer №2

Similar questions

Discovering Ways to Utilize User Controls with JavaScript

What is the best way to send props to FlatList using renderScene within react-native-tab-view?

What are the reasons for the POST method malfunctioning in a mobile web application?

Retrieve the currency code based on the user's timezone

Converting data from Random.org into an integer using JavaScript

Encountering NaN in the DOM while attempting to interpolate values from an array using ngFor

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Paste a URL into the input field to view it on the current page

Tips for displaying Facebook comments with JavaScript

Failure of $.post to activate the function

Angular detects when a user scrolls on a webpage

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

I am not encountering any errors; however, upon entering the room, my bot fails to initiate creation of a new channel

Showing AngularJS information on Views

Switching URLs or internal pages using jQuery Mobile's select menu feature

What is the best way to ensure that this form field remains hidden when the page is loaded?

Adding elements to an array appears to cause the previously created object to react

Simple method for extracting data from JSON and saving it into an array with jQuery

Transferring files to Amazon Web Services from Parse

When first logging in, React context may initially return as undefined, but it functions correctly upon refreshing the