How to render <ContentDoc> and ignoring query parameters

[svirmasalo]

Hi,

I have a problem: When ever I try to reach a dynamically routed page with query parameters, the server returns 404 page.

Here's an example:

• Resolves just fine: https://koirametsat.info/espoo/pikkutahti
• 404 page: https://koirametsat.info/espoo/pikkutahti?test=param

The page file is as follows:

pages/
  - city/
   -- [...slug].vue

And the [...slug].vue is as follows:

<script setup>

const route = useRoute();

definePageMeta({
  key: route => route.fullPath
})

const parkQuery = await queryContent({
  where: {
    _path: route.fullPath,
  },
}).findOne();

// Capitalize city name for meta tags. City name = route.params.city
const city = route.params.city.charAt(0).toUpperCase() + route.params.city.slice(1);

if (parkQuery) {
  useHead({
    meta: [
      {
        name: "keywords",
        content: `koirametsä ${parkQuery.title}, ${parkQuery.title}`,
      },
      {
        name: "author",
        content: "Koirametsät.info",
      },
      {
        name: "robots",
        content: "index, follow",
      },
      {
        name: "googlebot",
        content: "index, follow",
      },
      {
        name: "og:title",
        content: `${parkQuery.title} - ${city} - Koirametsät.info`,
      },
      {
        name: "og:url",
        content: `https://koirametsat.info${route.fullPath}`,
      },
      {
        name: "description",
        content: `${parkQuery.description} Koirametsän sijainti: ${city}.`,
      },
      {
        name: "og:description",
        content: `${parkQuery.description} Koirametsän sijainti: ${city}.`,
      }
    ],
    link: [
      {
        rel: "canonical",
        href: `https://koirametsat.info${route.fullPath}`,
      },
    ],
  });
}
</script>
<template>
  <ContentDoc/>
  <SchemaOrgWebPage />
</template>

This does not happen when on a strict route like /haku that has a page-file haku.vue.

Any help much appreciated.

[svirmasalo]

Hi,

This was the issue actualy:

I used route.fullPath on a queryContent when I should have used route.path.

<script setup>

const route = useRoute();
//....

const parkQuery = await queryContent({
  where: {
    _path: route.fullPath, // <-- Full path includes query params which caused the error. Use route.path instead.
  },
}).findOne();

//...