CODEWITHSUNDEEP
javascriptvue.jsvue-router
Nitesh
Nitesh

Reputation: 862

Vuejs router 3.0.1 path issue

I've just come across a strange issue and I'm not sure how to resolve it. Here's a sample of some route config:

routes: [
  {
    path: '/signin',
    name: 'signin',
    component: SignIn
  },
  {
    path: '/message/:messageType',
    name: 'message',
    component: Message,
    props: true
  }
]

Navigating to the various routes works perfectly, however the problem comes in when I'm on the Message component and try to navigate to any other route. My url would look like this:

https://localhost:8080/message/somemessage

When I click the Sign In link, I get this path:

https://localhost:8080/message/signin

instead of

https://localhost:8080/signin

I'm using the regular router-link:

<router-link to="signin">Sign In</router-link>

I get that it's matching on the closest route, but this is a problem for me.

Upvotes: 1

Views: 485

Answers (2)

gab71
gab71

Reputation: 3

From documentation of Api/router-link, the to attribute is relative path as referred to root:

The target location is specified with the to prop. It renders as an <a> tag with correct href by default

So, if you want to use router-link element without passing an object, I think you have to use what you set as path, and not name property:

<router-link to="/signin">Sign In</router-link>

Upvotes: 0

zero298
zero298

Reputation: 26920

See the documentation for named routes: Vue Router, named routes. I think you need to write your link this way:

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

In other words, I think you need to give the to attribute an object with a name property.

Upvotes: 4

Related Questions