nuxt.jsnuxt3.jsnuxtjs2

How to NuxtLink with Dynamic, Nested Pages?

I have a URL that looks like this where _websiteId and _appId is UUID:

/websites/_websiteId/apps/_appId/plugins

how can I link between the above and:

/websites/_websiteId/apps/_appId/settings

without losing:

/websites/_websiteId/apps/_appId/

and without ending up with:

/websites/_websiteId/apps/_appId/plugins/settings

using NuxtLinks?

Solution

  • Assume you have dynamic routes set up with the two params _websiteId and _appId to handle your URL format:

    /websites/_websiteId/apps/_appId/settings
/websites/_websiteId/apps/_appId/plugins

    You can access the params from route using Composition API and reconstruct the URL based on your need:

    <script setup>
const route = useRoute()

const websiteId = route.params._websiteId
const appId = route.params._appId
</script>
<template>
  <div>
    <NuxtLink :to="`/websites/${websiteId}/apps/${appId}/settings`">
      Settings
    </NuxtLink>
    <NuxtLink :to="`/websites/${websiteId}/apps/${appId}/plugins`">
      Plugins
    </NuxtLink>
  </div>
</template>

    Example of the corresponding pages directory: enter image description here

    More info on pages structure and dynamic route params https://nuxt.com/docs/guide/directory-structure/pages#example