The route path consists of data that will be retrieved before entering the route

Question

The route path consists of data that will be retrieved before entering the route

I am facing an issue with my router configuration. I have a dynamic Route that requires the last part of its path to be set after fetching data from a store call in beforeRouteEnter.

beforeRouteEnter (to, from, next) {
if(to.params.categoryId) {
  next(vm => {
    store.dispatch('getSearchResults', to.params)
      .then(res => {
        let category = res.data.categories.find(cat => cat.id == to.params.categoryId);
        to.params.CName = category.name;
        // to.path = to.path + `/${category.name}`;
        console.log(to)
      }).catch(err => false)
  })
}else next();

The current Route setup is as follows:

{
  path: 'directory/bc-:categoryId(\\d+)?/:CName?',
  name: 'SearchResults',
  component: () => import(/* webpackChunkName: "listing" */ '../views/SearchResults.vue')
},

I need to update the CName parameter in the Route to reflect the category's name from the fetched data so that the final route displays the category name after the Id.

javascript vue.js vue-router routeparams

Answer 1

Answer №1

It is recommended to create a route with 2 children - one for dispatching the Vuex action and another for transitioning to the second child component.

{
  path: 'directory/bc-:categoryId(\\d+)?',
  name: 'SearchResultsParent',
  redirect:
  {
    name: 'SearchResultsFetch',
  },
  component: WrapperComponent,
  children:
  [
    {
      path: '',
      name: 'SearchResultsFetch',
      component: FetchSearchResults,
    },
    {
      path: ':CName',
      name: 'SearchResultsList',
      component: ShowSearchResults,
    },
  ]
}

// WrapperComponent.vue
<template>
  ....
  <router-view />
  ....
</template>

// FetchSearchResults.vue
<script>
export default
{
  created()
  {
    this.fetchData();
  },
  beforeRouteUpdate(to, from, next)
  {
    this.fetchData();
    next();
  },
  methods:
  {
    fetchData()
    {
      store.dispatch('getSearchResults', this.$route.params)
      .then(res => {
        let category = res.data.categories.find(cat => cat.id == this.route.params.categoryId);
        this.$router.push({
          name: 'SearchResultsList',
          params:
          {
            categoryId: this.$route.params.categoryId,
            CName: category.name,
          }
        });
      }).catch(err => false)
    }
  }
}

Answer 2

It is recommended to create a route with 2 children - one for dispatching the Vuex action and another for transitioning to the second child component.

{
  path: 'directory/bc-:categoryId(\\d+)?',
  name: 'SearchResultsParent',
  redirect:
  {
    name: 'SearchResultsFetch',
  },
  component: WrapperComponent,
  children:
  [
    {
      path: '',
      name: 'SearchResultsFetch',
      component: FetchSearchResults,
    },
    {
      path: ':CName',
      name: 'SearchResultsList',
      component: ShowSearchResults,
    },
  ]
}

// WrapperComponent.vue
<template>
  ....
  <router-view />
  ....
</template>

// FetchSearchResults.vue
<script>
export default
{
  created()
  {
    this.fetchData();
  },
  beforeRouteUpdate(to, from, next)
  {
    this.fetchData();
    next();
  },
  methods:
  {
    fetchData()
    {
      store.dispatch('getSearchResults', this.$route.params)
      .then(res => {
        let category = res.data.categories.find(cat => cat.id == this.route.params.categoryId);
        this.$router.push({
          name: 'SearchResultsList',
          params:
          {
            categoryId: this.$route.params.categoryId,
            CName: category.name,
          }
        });
      }).catch(err => false)
    }
  }
}

The route path consists of data that will be retrieved before entering the route

Answer №1

Similar questions

Troubleshooting HTTP Response Body Encoding Problem in Node.js

tips for optimizing pdf size using nodeJs and vueJs

Create a social chat platform similar to Facebook by implementing a chat box feature with the help of AJAX, jQuery

Passing a variable to a template in Node.js and express with hbs is causing an unexpected identifier error

Troubleshooting directive not functioning properly with AngularJS ng-click

Troubleshooting: Issues with the functionality of ng-include in AngularJS

Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

Utilize Jquery to hide radio buttons, while allowing users to click on an image to display a larger version

Unable to set initial values for Select Option in Redux-Form

Issue Detected at a Precise Line Number - Android Studio

How can I incorporate a feature in my Angular application that allows users to switch between different view types, such as days, using JavaScript

Error: The function wrapper.find().simulate('keypress', {key: 'Enter', keycode: 13}) is not working as expected

Loading fonts in Nuxt.js production modeIn a production setting, making

Hiding labels using JQuery cannot be concealed

What is causing a single state update when setState is called twice in React?

Printing in HTML is limited to only one page

Generating a dynamic model name within a Vue v-for loop

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

What is the best way to display changing session variables in PHP?

Discovering checkboxes in HTML using jQuery