CODEWITHSUNDEEP
vue.jsnuxt.jsvue-routerasyncdata
Dollique
Dollique

Reputation: 1012

nuxt route change query endless loop

I have a nuxt one-pager website and I am trying to set up a router for the language switcher. My headless CMS (Storyblok) has language logic setup by using ?language=xyz.

The data is fetched by using AsyncData() hook in the pages/index.vue.

Now when I change the route from '/' to '/xyz' the AsyncData() is called again and the route changes.

When I do not change the path but only the query (language=xyz) this does not happen.

I tried to add the following:

beforeRouteUpdate (to, from, next) {
    console.log('BEFORE UPDATE', to.query.language);
    console.log('BEFORE UPDATE 2', this.$route.query.language);

    if(to.query.language != this.$route.query.language) {
      //this.$router.push({ path: '/', query: { language: to.query.language } })
      next();
    }
  }

When I now click on the navigation I can see in the console log, the current and new language but still nothing happens.

When I try to push the route (commented out code above) I get an endless loop and see the beforeRouteUpdate running again and again, but the AsyncData is not run.

What can I do, so the behavior is the same as when the path of the route changes?

Upvotes: 0

Views: 482

Answers (1)

Sebastian Johansson
Sebastian Johansson

Reputation: 79

Are you sure that you are actually fetching it again from storyblok? Are you fetching it with the storyblok module or are you fetching it straight from the API manually?

What I would suggest as a counter option would be to add the nuxt i18n module and fetch the data from storyblok with the i18n language and use the i18n language switch feature! That way you can also add translations that don't fit into the storyblok structure.

Upvotes: 1

Related Questions