Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`isSameRoute()` function ignoring route parameters #3049

Closed
seatbeltsign opened this issue Dec 3, 2019 · 3 comments
Closed

`isSameRoute()` function ignoring route parameters #3049

seatbeltsign opened this issue Dec 3, 2019 · 3 comments

Comments

@seatbeltsign
Copy link

@seatbeltsign seatbeltsign commented Dec 3, 2019

Version

3.1.3

Reproduction link

https://jsfiddle.net/4Lagk7z8/

Steps to reproduce

Click the "user foo" navigation link in the fiddle, then click "user bar"!

What is expected?

Clicking a link having different parameters than the current route should navigate to the new route.

What is actually happening?

Navigation will work only the first time you click a link, any subsequent clicks (on any link) result in a NavigationDuplicated error.


In the isSameRoute() function, route parameters are only considered in case the routes have a name but no path declared.

@fnlctrl @posva @yyx990803 However, since the routes are determined via match(location, this.current) in transitionTo(), they always have a path defined as it is required when defining a route. Hence, the parameters are never taken into account when comparing routes in isSameRoute(), which results in a NavigationDuplicated error despite differing route parameters.

@seatbeltsign

This comment has been minimized.

Copy link
Author

@seatbeltsign seatbeltsign commented Dec 3, 2019

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>

<div id="app">
  <p>Click the links! Navigation will work only the first time, any subsequent clicks result in a <code>NavigationDuplicated</code> error.</p>
  <p>
    <code>&lt;router-link&gt;</code>
    <router-link :to="{ name: 'user', params: { id: 'foo' } }">user foo</router-link>
    <router-link :to="{ name: 'user', params: { id: 'bar' } }">user bar</router-link>
  </p>
  <p>
    <code>router.push()</code>
    <a href="#" @click="$router.push({ name: 'user', params: { id: 'foo' } })">user foo</a>
    <a href="#" @click="$router.push({ name: 'user', params: { id: 'bar' } })">user bar</a>
  </p>
  <router-view></router-view>
</div>
const User = {
  props: ['id'],
  template: `<div>User {{ id }}</div>`
}

const router = new VueRouter({
  routes: [
    { name: 'user', path: '/user', component: User, props: true }
  ]
})

const app = new Vue({ router }).$mount('#app')
@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Dec 3, 2019

Params must be part of the url like /users/:id -> id param. They are not meant to pass arbitrary state. Also, when navigating via router.push or router-link, params are meant to be used with name to build up the path. If you provide the path, that's what is used

@posva posva closed this Dec 3, 2019
@seatbeltsign

This comment has been minimized.

Copy link
Author

@seatbeltsign seatbeltsign commented Dec 3, 2019

@posva Thanks for your reply.

Providing name and params is what I'm doing.

I came across this issue when passing references/complex objects instead of primitive values to the target route's component.

Still wondering when the block at https://github.com/vuejs/vue-router/blob/v3.1.3/src/util/route.js#L85 comes into play. Routes are determined based on the location provided (match(location, this.current) in transitionTo()) before being passed to isSameRoute(), so they should always have a path defined, shouldn't they?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.