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

Challenge encountered with asynchronous angular queries

Executing several GET requests in JavaScript

Personalized dropdown appearance

Is it possible to execute an npm package without using the npm run command?

Altering Image Order Across Various Slides

Is there a way to manipulate the DOM without relying on a library like jQuery?

Guide to extracting the outcomes of a promise array and populating them into a new array using Protractor

The selected jQuery plugin is not functioning properly within CodeIgniter framework

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

What is the correct placement for $.validator.setDefaults({ onkeyup: false }) in order to deactivate MVC3 onKeyup for the Remote attribute?

Error: Vue is unable to access the property '_modulesNamespaceMap' because it is undefined

Ways to showcase a variable's value in conjunction with text using .html() method

Custom headers in XmlHttpRequest: Access control check failed for preflight response

Modifying the state of a store through a component

The error occurred while trying to cast the value of "{{Campground.name}}" to an ObjectID. This value, which is of type string, could not be converted to an ObjectID at the path "_id" for

What options are available for managing state in angularjs, similar to Redux?

Problem with Vue.js run serve after installation

What is the best way to create a button that will trigger a modal window to display a message?

Unable to modify the styles of nested Material UI components

Jquery allows for the toggling of multiple checkboxes