Having issues with v-link in vue.js

Question

In my vue.js application, I have a route that looks like this:

/edit/ride/:rideId

When I try to link to this URL in my vue.js web app using the following code:

<a v-link="{ name: 'edit/ride', params: { rideId: ride.id }}" class="btn-edit">Edit</a>

I encounter the following error:

main.js:4043 Uncaught Error: There is no route named /edit/ride/

What could be causing this issue?

Answer 1

Answer №1

To utilize Vue 1.x and Vue-router 0.7 effectively:

Ensure to assign a name attribute to your route '/bewerk/rit/:rideId' instead of passing the path as the name.

router.map({
  '/bewerk/rit/:rideId': {
    name: 'edit_ride', // provide a unique name for the route
    component: { ... }
   }
})

Then, in your HTML:

<a v-link="{ name: 'edit_ride', params: { rideId: ride.id }}">Edit</a>

Update: For Vue 2.0 and Vue-Router 2.0:

<router-link :to="{ name: 'edit_ride', params: { rideId: ride.id }}">
  Edit      
</router-link>

Answer 2

To utilize Vue 1.x and Vue-router 0.7 effectively:

Ensure to assign a name attribute to your route '/bewerk/rit/:rideId' instead of passing the path as the name.

router.map({
  '/bewerk/rit/:rideId': {
    name: 'edit_ride', // provide a unique name for the route
    component: { ... }
   }
})

Then, in your HTML:

<a v-link="{ name: 'edit_ride', params: { rideId: ride.id }}">Edit</a>

Update: For Vue 2.0 and Vue-Router 2.0:

<router-link :to="{ name: 'edit_ride', params: { rideId: ride.id }}">
  Edit      
</router-link>

Answer 3

One alternative method involves the use of path:

<a v-link="{ path: '/edit/ride/' + ride.id }">Edit</a>

Answer 4

One alternative method involves the use of path:

<a v-link="{ path: '/edit/ride/' + ride.id }">Edit</a>