Vue-router: Using named route persists old route params

[erikgall]

Vue.js version

2.0.5

Vue-Router version

2.0.2

Reproduction Link

https://jsfiddle.net/erikgall/spz2j6o6/

Steps to reproduce / What is happening

The problem occurs when navigating back to a parent route (or sibling route) with no parameters from a child route that has a parameter. The bug seems to only happen when using named routes as well.

// current path: /students/classrooms/1
<router-link :to="{ name: 'students.classrooms'  }">All Classrooms</router-link>

Component/Route Hierarchy

root component --> layout component (ex. student, instructor, guest) --> page component

-> ./app.vue
---> ./students.vue
------->./students/index.vue
-------> ./students/classrooms/index.vue (path: students/classrooms)
-------> ./students/classrooms/show.vue (path: students/classrooms/:classroom)

When navigating from the show.vue component to any other component the classroom param persists and is not removed.

students/classrooms/:classroom to students/classrooms

This is an issue if you depend on using a v-if directive to render a component that should be inserted if a route param exists like in the example below.

What is Expected?

If a route contains a param it should be present in the vm.$route.params object and when navigating from that route to a new one the params object is updated to reflect the current url.

[yyx990803]

Seems to be a regression introduced by #851 - @fnlctrl do you have time to look into this?

[fnlctrl]

Yeah, I'll take a look.

[znck]

@fnlctrl it's fixed in #910

[fnlctrl]

👍

[erikgall]

Thank you @fnlctrl @znck @yyx990803

[ghost]

@fnlctrl @znck @yyx990803 thanks for fixing this however it does not seem to address the issue.
@erikgall did you check it?

i have a similar setup, entering a sub-route with a optional parameter it does not drop the param when going back to parent route.

url pattern: /store/:product?

when entering /store/blah then click <router-link :to="{name: 'store'}"... it stays on /store/blah

works perfect on 2.0.1

[fnlctrl]

@sleewoo Are you using the latest version? If so, please provide a repro on jsfiddle, thanks!

[jeerbl]

@sleewoo I updated to the latest version, it worked for me.

[ghost]

@fnlctrl sure, updated 2.0.3 and almost deployed it to production but tests stopped me :)

[ghost]

will try do a repro
@jeerbl glad it worked for you

[ghost]

so here is a working version, using 2.0.1
https://jsfiddle.net/thk8c0tc/1/

and here is 2.0.3
https://jsfiddle.net/nqqLo66d/4/

clicking on /store/blah sets params to { "product": "blah" }
then clicking on /store should set params to {}
it does on 2.0.1 but on 2.0.3 params remains the same

[ghost]

query works well on both versions
https://jsfiddle.net/nqqLo66d/5/
https://jsfiddle.net/thk8c0tc/3/

[ghost]

most likely is a shoot in the moon but could this be related?
https://github.com/vuejs/vue-router/commit/60a5b58b8706db5ef5f1519a75975922d2e630b5

[erikgall]

@sleewoo The latest release version worked for me. I don't have any optional parameters though.

[fnlctrl]

Seems to be a bug where optional params aren't
removed. Should be an easy fix though, will do it asap.

[znck]

@fnlctrl I'll fix this one.

Route: { name: 'store', path: '/store/:product?' }
Expected: When transition from /store/:product? to /store occurs, it should have $route = {}
Solution: Don't remember optional parameters.

[saleem-git]

The issue occurs again. Using path(absolute path) works fine but named route has the same issue as described by OP.

[email protected]
[email protected]

routes: [ { path: '/addarea', name: 'addarea', component: addArea, }, ...... { path: '/distancedatatable/:type', name: 'distancedatatable', component: distanceFeeDt, }, ], });

From 'http://localhost:8080/#/distancedatatable/restaurant' and clicking on named route
<router-link to="addarea">Area</router-link>

Expected:
URL should change to
http://localhost:8080/#/addArea

Current Behavior:
http://localhost:8080/#/distancedatatable/addArea