CODEWITHSUNDEEP
nuxt.jsnuxt3.jsnuxtjs2
Charlotte Wells
Charlotte Wells

Reputation: 635

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?

Upvotes: 0

Views: 486

Answers (1)

jjj
jjj

Reputation: 408

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

Upvotes: 3

Related Questions