How to add text to router-link in vueJS

Question

I'm trying to add some text to my "to" attribute using router-link. The code that I've written is

<router-link :to="camp._id" class="btn btn-primary">Know more</router-link> // it redirects to the route localhost/23bjsaki24r...

My requirement is to redirect the user to route - localhost/campgrounds/23bjsaki24r... instead of localhost/23bjsaki24r... How can I add the string "campgrounds" before camp._id? Thanks

PS: I'm using Vuejs

Answer 1

Hahaha, nvm, I dug through the vue-router docs and found the solution to it.

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

This code snippet gave me a clearer understanding as to how to add additional parameters to my ":to" attribute.

The solution to my problem is

<router-link :to="{ name: 'Campground', params:{id:camp._id}}" class="btn btn-primary">Know more</router-link>

Where the name: -takes in the component name and the params: -takes in the additional params that I've defined in my vue-router file.