Nuxt•2mo ago

Route aliases and named views

I have this page:

definePageMeta({
  name: 'PurchaseError',
  path: '/purchase-error/:token?',
  alias: ['/purchase/product-error/:token?'],
  layout: 'checkout',
  middleware: ['auth', 'checkout'],
});

definePageMeta({
  name: 'PurchaseError',
  path: '/purchase-error/:token?',
  alias: ['/purchase/product-error/:token?'],
  layout: 'checkout',
  middleware: ['auth', 'checkout'],
});

How can I navigate to a specific path when using navigateTo({name: 'PurchaseError'}) For the moment when using this method it only goes to the original path.

7 Replies

kapa.ai•2mo ago

Hi @JuanMCe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When you use navigateTo({ name: 'PurchaseError' }), Nuxt (via vue-router) will always resolve the navigation to the route's canonical path, which is the one defined by the path property in your definePageMeta (in your case, /purchase-error/:token?). The alias property only allows the same page to be accessible via additional URLs, but programmatic navigation by route name will always use the main path, not an alias. There is no built-in way in Nuxt or vue-router to programmatically navigate to an alias path using the route name. If you want to navigate to the alias path, you must specify the path directly in your navigateTo call, like so:

await navigateTo('/purchase/product-error/your-token')

await navigateTo('/purchase/product-error/your-token')

or, if you need to include a dynamic token:

await navigateTo(`/purchase/product-error/${token}`)

await navigateTo(`/purchase/product-error/${token}`)

Aliases are primarily for allowing users to access the same page via different URLs, not for programmatic navigation by name. This behavior is consistent with vue-router's handling of aliases as well Special Metadata: alias. I'm sorry, but there's no information in the knowledge sources about a way to make navigateTo({ name: 'PurchaseError' }) resolve to an alias path instead of the canonical path. If you need to navigate to the alias, you must use the path directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

JuanMCeOP•2mo ago

Can I use

navigateTo({path: `/purchase/product-error/`, params: {token: 123})

navigateTo({path: `/purchase/product-error/`, params: {token: 123})

@kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @JuanMCe, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JuanMCeOP•2mo ago

@kapa.ai Can I use

navigateTo({path: `/purchase/product-error/`, params: {token: 123})

navigateTo({path: `/purchase/product-error/`, params: {token: 123})

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You can use navigateTo with a path directly, like this:

await navigateTo({ path: '/purchase/product-error/123' })

await navigateTo({ path: '/purchase/product-error/123' })

However, if you use the params property together with a path, the params will not be automatically injected into the path. The params property is only used when you navigate by name, not by path. When you specify a path, you need to manually include any dynamic segments (like token) in the path string itself Docs: navigateTo parameters. So, this will not work as you might expect:

navigateTo({ path: '/purchase/product-error/', params: { token: 123 } }) // params ignored

navigateTo({ path: '/purchase/product-error/', params: { token: 123 } }) // params ignored

Instead, you should do:

navigateTo(`/purchase/product-error/123`)

navigateTo(`/purchase/product-error/123`)

or, if you want to use an object:

navigateTo({ path: `/purchase/product-error/123` })

navigateTo({ path: `/purchase/product-error/123` })

In summary:
- When using path, include all dynamic segments yourself. - The params property is only used when navigating by name Docs: navigateTo parameters. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Route aliases and named views

Did you find this page helpful?