Nuxt•2d ago

Two routes with the same page component

As the title says I'd like two different routes to make use of the same pages/mypage.vue component. How can I go about this?

14 Replies

kapa.ai•2d ago

Hi @Cheaterman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can map multiple routes to the same page component by extending Nuxt’s generated pages using the pages:extend hook in nuxt.config, pointing each route to the same file. [SEF addresses] Example (nuxt.config.ts):

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      pages.push(
        {
          name: 'mypage-alias-1',
          path: '/first-route',
          file: '~/pages/mypage.vue',
        },
        {
          name: 'mypage-alias-2',
          path: '/second-route',
          file: '~/pages/mypage.vue',
        }
      )
    },
  },
})

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      pages.push(
        {
          name: 'mypage-alias-1',
          path: '/first-route',
          file: '~/pages/mypage.vue',
        },
        {
          name: 'mypage-alias-2',
          path: '/second-route',
          file: '~/pages/mypage.vue',
        }
      )
    },
  },
})

Both /first-route and /second-route will now render pages/mypage.vue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@534768504943935500> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CheatermanOP•2d ago

@kapa.ai that seems great, how do I differentiate the route used by the user in that case, do I use eg const { name } = useRoute() and match the name bit that you pushed?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, using useRoute() and checking the route name is the right way to tell which alias was used. In your case you can do:

const route = useRoute()

// access the name you defined in pages:extend
const currentName = computed(() => route.name)
// or directly: route.name

const route = useRoute()

// access the name you defined in pages:extend
const currentName = computed(() => route.name)
// or directly: route.name

Given the config:

pages.push(
  {
    name: 'mypage-alias-1',
    path: '/first-route',
    file: '~/pages/mypage.vue',
  },
  {
    name: 'mypage-alias-2',
    path: '/second-route',
    file: '~/pages/mypage.vue',
  }
)

pages.push(
  {
    name: 'mypage-alias-1',
    path: '/first-route',
    file: '~/pages/mypage.vue',
  },
  {
    name: 'mypage-alias-2',
    path: '/second-route',
    file: '~/pages/mypage.vue',
  }
)

inside pages/mypage.vue you can branch on route.name:

const route = useRoute()

const variant = computed(() =>
  route.name === 'mypage-alias-1' ? 'first' : 'second'
)

const route = useRoute()

const variant = computed(() =>
  route.name === 'mypage-alias-1' ? 'first' : 'second'
)

useRoute() is the standard way to access the active route object in Nuxt 3, and it’s used in a similar way in other routing examples as well.[Dynamic routing; Image src by route] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@534768504943935500> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CheatermanOP•2d ago

@kapa.ai I'm using Nuxt i18n so isn't it rather useRouteBaseName() + getRouteBaseName() ?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- With @nuxtjs/i18n, using the route name is still valid; i18n mostly decorates/aliases paths and names, it doesn’t replace useRoute(). None of the provided sources mention useRouteBaseName() or getRouteBaseName(), so I can’t confirm their behavior from these docs. What is documented in the sources: - You can access the current route in a page via useRoute() and read its name or params (including for dynamic routes). [Dynamic routing; Dynamic routing + i18n] - i18n helpers like useLocalePath() build localized links from route names/paths, but do not change how useRoute() is used. [Nuxt i18n middleware warning; Dynamic routing + i18n] So, for differentiating which of the two aliases was used, from what’s in the sources the supported pattern remains:

const route = useRoute()

if (route.name === 'mypage-alias-1') {
  // logic for first alias
} else if (route.name === 'mypage-alias-2') {
  // logic for second alias
}

const route = useRoute()

if (route.name === 'mypage-alias-1') {
  // logic for first alias
} else if (route.name === 'mypage-alias-2') {
  // logic for second alias
}

I’m sorry, but there’s no information in the given knowledge sources about useRouteBaseName() or getRouteBaseName(), so I can’t say whether they would be preferable or how exactly they interact with i18n route aliases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@534768504943935500> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CheatermanOP•2d ago

@kapa.ai Are you sure? https://i18n.nuxtjs.org/docs/composables/use-route-base-name

@nuxtjs/i18n

useRouteBaseName

The useRouteBaseName() composable returns a function that gets the route's base name.

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You’re right that @nuxtjs/i18n documents useRouteBaseName() / getRouteBaseName(), but in the materials I have here there’s no content from that specific docs page, so I can’t rely on it. From the available sources, what is shown is: - Differentiating routes (including dynamic ones) in Nuxt 3 is done via useRoute() and checking route.name and route.params. [Dynamic routing 1; Dynamic routing + i18n] - @nuxtjs/i18n builds localized links from route names with useLocalePath() / localePath, but the examples still work entirely off the normal Nuxt route name (e.g. products-type). [Dynamic routing + i18n] So, based only on these sources, the supported way to distinguish the two aliases that both point to pages/mypage.vue remains:

const route = useRoute()

if (route.name === 'mypage-alias-1') {
  // logic for /first-route
} else if (route.name === 'mypage-alias-2') {
  // logic for /second-route
}

const route = useRoute()

if (route.name === 'mypage-alias-1') {
  // logic for /first-route
} else if (route.name === 'mypage-alias-2') {
  // logic for /second-route
}

I don’t have any information here about useRouteBaseName() / getRouteBaseName() (how they derive or normalize names, or how they behave with custom routes added via pages:extend), so I can’t say they’re preferable or describe their behavior accurately. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@534768504943935500> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CheatermanOP•2d ago

@kapa.ai Wait are you telling me you don't actually have access to Nuxt i18n docs?

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I don’t have direct access to the live Nuxt i18n docs site; I only see the specific excerpts you’ve provided (Stack Overflow posts, Nuxt issues/PRs, etc.).
In those excerpts there’s no mention of useRouteBaseName() / getRouteBaseName(), only: - Standard useRoute() usage for dynamic routing. [Dynamic routing] - How @nuxtjs/i18n integrates via useLocalePath, nuxt.$localePath, and route names. [Nuxt i18n middleware; Dynamic routing + i18n] So I can’t reliably quote or explain useRouteBaseName() from the official docs, even though I know it exists in the real module. Within this constrained context, all I can do is: - Use useRoute() + route.name / route.params to distinguish routes. - Use the i18n helpers that are actually present in the shared sources (e.g. useLocalePath, nuxt.$localePath). [Nuxt i18n middleware] Outside these provided snippets, I don’t have broader access to the documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@534768504943935500> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Two routes with the same page component

Did you find this page helpful?