Vue 3 / Vue Router 4 router-link won't use full link from prop

user_4809306 0
Viewed 128

I have a prop that's supposed to pass "careers/whatever-entry-here", and I'm trying to use router-link to set it up.

<router-link v-if="!buttonLink" :to="buttonEntry" exact class="bunch-of-classes-here">
     Click Here
</router-link>

I am expecting the link to render as "http://localhost:3000/careers/whatever-entry-here" - but instead I get "http://localhost:3000/whatever-entry-here".

I have looked everywhere but I can't seem to get it to pass the folder to the URI.

When I output {{ buttonEntry }} somewhere else in the template, it outputs it "careers/whatever-entry-here"

Any suggestions?

vue-router vuejs3 vue.js
1 Answers

Ahh. Requires a '/' before the URI, which the API wasn't returning.

Solved by changing the code to:

<router-link v-if="!buttonLink" :to="`/`+buttonEntry" exact class="bunch-of-classes-here">
     Click Here
</router-link>
user_48093060
Related