How to parameterize a route in the Vue?

Asked

Viewed 1,436 times

0

I’m using the vue/router to make a spa, and I’m having difficulty sending the id of a particular product by the url... I’m doing so on the link:

 <router-link :to="{name:'editar',params:{id:item.id}}">editar2</router-link>

route:

 const routes = [{
    path: '/',
    component: Vue.component('home-page')
}, {
    path: '/teste',
    component: Vue.component('home-page')
}, {
    path: '/editar',
    'name': editar,
    component: Vue.component('home-page')
}]
const myRouter = new VueRouter({
    routes
})

but it doesn’t work at all... url?

vue.js link router

  • How you set your route?

  • the route file is configured like this: const Routes=[ { path:'/', Component: Vue.Component('home-page') }, { path:'/test', Component: Vue.Component('home-page') }, { path:'/edit','name':edit, Component: Vue.Component('home-page') } ] constmyR = outer new Vuerouter({Routes})

  • try: {&#xA; path: '/editar:id',&#xA; 'name': editar,&#xA; component: Vue.component('home-page')&#xA;}

  • so the problem is the link...it does not send parameters

  • <router-link to='/edit/${id:item.id}'>editar2</router-link>

  • it was not yet...gave error because of $ (I am not working with Node.js is a simple application) removing the $ too, it did not work

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

1

You need to specify the parameter name in the route declaration:

{
    path: '/editar/:id',
    name: 'editar',
    component: Vue.component('home-page')
}

And to get the received parameter

$route.params.id or this.$route.params.id

For more information read Vue-router documentation.

Browser other questions tagged vue.js link router

You are not signed in. Login or sign up in order to post.