Vue router named routes automatically encodes params?

Say I have the following route:

{
  name: 'myRoute',
  path: 'route1/:myrouteparam',
  component: MyComponent
}

When I do something like this:

this.$router.push({
  name: 'myRoute',
  params: {
    myrouteparam: 'example:routeparamvalue'
  }
});

//browser redirects to /route1/example:routeparamvalue
//

Also, copy pasting the url to a text editor doesn’t change anything. (browser doesnt seem to beautify the link as described here)

But when I do encode the route parameter like this:


this.$router.push({
  name: 'myRoute',
  params: {
    myrouteparam: encodeURIComponent('example:routeparamvalue')
  }
});

The browser redirects to /route1/example%253Arouteparamvalue Notice that the route parameter is encoded 2 times.

Interestingly, this.$route.params.myrouteparam returns a decoded value: example%3Arouteparamvalue.

Hence calling:

decodeURIComponent(this$.$route.params.myrouteparam)

will give the original route parameter value.

This now begs the question, do we have to encode the route parameters when using named routes? Can’t seem to find any information confirming this behavior in the documentation