Vue-router: URL parameters are re-encoded when aborting a transition

Created on 12 Oct 2016  路  12Comments  路  Source: vuejs/vue-router

If any parameter contains a URL encoded value, the value is re-encoded when the transition is aborted.

If the current URL is http://website.com/#!/accounts?PARAM=%20, calling transition#abort redirects to http://website.com/#!/accounts?PARAM=%25%20 instead of the original URL.

Checking transition#abort, it seems the call to #stringifyPath performs the double encoding when a String parameter is passed.

1.x bug

All 12 comments

Hi @dfmelicor

Thanks for filing this issue! Could you please provide a small reporduction on jsfiddle so we can debug this without trying to replicate this ourselves?`

That would be very helpful, thanks!

Hi @LinusBorg

Please see: https://jsfiddle.net/dfmelicor/ehgtkpa2/2/

You can click Navigate to go to a random link. Ticking the Abort Transition checkbox before clicking Navigate reproduces the problem.

It seems to be replicable using the following versions:

  • Vue 1.0.28
  • Vue Router 0.7.13

Thank you!

Thanks for the fiddle.

We will take care of this.

Thank you!

Appreciate all the work you guys are doing.

Will send PR tomorrow.

@LinusBorg Any update on this?

Dang, totally forgot about this one. Hope I have time to push this tonight, if not it has to wait until the weekend.

Finally came around to making this PR

@LinusBorg Will a new build of vue-router be created to include this change? Or we should just build on our own?

We will surely release a new version of the 0.7 branch which includes this fix.

We will have to ask @yyx990803 about the timeline though.

@LinusBorg Got it. Looking forward to the next release.

@LinusBorg We're trying out the fix now, but encountering a different problem with encoding. Colons and slashes don't seem to be encoded after the abort.

e.g.:
Original URL, where PARAM = :

http://example.com/!#/path?PARAM=%3A

It is expected that on abort, URL remains unchanged. But the actual behavior is, the URL now becomes

http://example.com/!#/path?PARAM=:

I think the problem is with the ff. call in RouteTransition#abort

const path = this.from.path ? tryDecode(this.from.path, true) : '/'

Shouldn't the second parameter be false?

Was this page helpful?
0 / 5 - 0 ratings