Vue router deletes query parameters

Question

I'm using Nuxt2/Vue2 and I'm having trouble getting the query parameters when generating the website.

I created my URL in the nuxt configuration by using an entry in Contentful like this:

generate: {
  crawler: false,
  async routes() {
    const items = (
      await fetchEntriesByContentType({ contentType: "items" })
    ).map(entry => {
       const routes = {
         route: `/items/item/${entry.fields.slug}`,
         payload: entry,
       }
       return routes;
    });
   return items;
  }
}

If I console log and try to debug in a Nuxt configuration file, it returns a url with parameters as expected, such as /items/item/101?type=book

However, if I try to access it in my Vue component using this.$route.path, this.$route.fullPath or this.$route.query etc., it never returns after the "?" Any content. For example. For the example above it would always be /items/item/101

Do I need to add something to the nuxt configuration to include query parameters? I noticed that if I click this.$route to go to the definition, it goes to the vue-router file in my node_modules even though I don't have vue-router installed. Is this causing the problem?

Answer 1

You will not return anything in the map callback, assuming routes must be returned, it should look like this:

const items = (
    await fetchEntriesByContentType({ contentType: "items" })
).map(entry => {
    const routes = {
        route: `/items/item/${entry.fields.slug}`,
        payload: entry,
    }
    return routes;
});