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

[wyf027]

Use router.resolve() for this. It is the API Vue Router uses to turn a route location object into the final URL/href without navigating.

For example, with a named route:

import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute('/talks/[talkId]/get-started')
const router = useRouter()

const url = computed(() => {
  const { href } = router.resolve({
    name: '/talks/[talkId]/overview',
    params: { talkId: route.params.talkId },
  })

  return new URL(href, window.location.origin).href
})

router.resolve() gives you the path that Vue Router would use for a <RouterLink>, including the router base if you configured one. new URL(href, window.location.origin).href is just the browser part that turns that app-relative href into an absolute URL for your QR code.

If your route has an explicit name, use that instead of the file-based typed route name:

const { href } = router.resolve({
  name: 'talk-overview',
  params: { talkId: route.params.talkId },
})

That keeps param encoding and route changes in Vue Router instead of manually concatenating strings.