How to create a route URL?

[Barbapapazes]

Hello,

I'm looking for a way to programmatically create a full URL in order to show a QR code.

For example, I'm on the route /talks/:talkId/get-started where I want to show a QR code that opens /talks/:talkId/overview. How can I create https://example.com/talks/:talkId/overview without having to hard code it?

[Barbapapazes]

For now, I have to do

const route = useRoute('/talks/[talkId]/get-started')
const url = computed(() => {
  const baseUrl = window.location.origin
  return `${baseUrl}/talks/${route.params.talkId}/overview`
})

but it's not type safe.

[posva]

you should be able to append route.fullPath to the origin
That’s the only part the router doesn’t know of: the domain

[Barbapapazes]

yes, but I'm looking for a way to create a route like /:talkId/overview from the page /:talkId/qr-code and useRoute().fullPath returns the path from the current URL, not from the one used in the first argument.

For example and considering the following URL http://localhost:5173/98fdb8e4-f2c6-40de-8f17-bc9d58f00b35/talks/e8a2f688a5eb83e6df80477e5f7df4c315c0c995a51e5f296d5425550b254781/qr-code :

const url = computed(() => {
  const baseUrl = window.location.origin
  console.log(useRoute('/presentation/[presentationId]/overview').fullPath)
  return `${baseUrl}/talks/${route.params.talkId}/overview`
})

The log will be

• /98fdb8e4-f2c6-40de-8f17-bc9d58f00b35/talks/e8a2f688a5eb83e6df80477e5f7df4c315c0c995a51e5f296d5425550b254781/qr-code

but I expect it to be

• /presentation/e8a2f688a5eb83e6df80477e5f7df4c315c0c995a51e5f296d5425550b254781/overview

[posva]

Ah then you want to use router.resolve().href