I'm trying to go to a UserDetail path in my vue app using vue-router.

My routes are :

const routes = [
  { path: '/users', ponent: UserList },
  { path: '/users/:user_id', ponent: UserDetail },
  { path: '/bar', ponent: Bar }
]

And router link :

    <td><router-link :to = "{ path: 'users/:user_id', params: {user_id: user.id}} ">{{user.name}}</router-link></td>  

But this is clearly not the correct syntax. I normally used named routes (see .html for example) for this type of stuff but how could I use path?

edit #1

mousing over one of the links:

I'm trying to go to a UserDetail path in my vue app using vue-router.

My routes are :

const routes = [
  { path: '/users', ponent: UserList },
  { path: '/users/:user_id', ponent: UserDetail },
  { path: '/bar', ponent: Bar }
]

And router link :

    <td><router-link :to = "{ path: 'users/:user_id', params: {user_id: user.id}} ">{{user.name}}</router-link></td>  

But this is clearly not the correct syntax. I normally used named routes (see https://router.vuejs/en/api/router-link.html for example) for this type of stuff but how could I use path?

edit #1

mousing over one of the links:

• javascript
• vuejs2
• vue-router

1 Answer 1

The solution is simple. Just do like router-link docs says:

<td>
  <router-link :to="{ name:'users', params: { user_id: user.id }}">
    {{user.name}}
  </router-link>
</td>

If you want to pass the parameters like this, you should use name instead of path inside the :to.