Vue-router: Disabling URI encoding

[zackfroo]

Hi,

How would I disable uri encoding globally for all the urls generated with vue-router.
I want to leave all the special characters in the url. Is there a config I am missing?

Thank you.

[LinusBorg]

There curretly is no config for this. And non-escaped URIs are not spec-compliant so I don't think we cant to use provide this option.

What is your usecase?

[zackfroo]

My use case is very simple. I am building my web app in a foreign language such as Hindi, Arabic or Hebrew and I would like to keep my URIs in the chosen language just like Wikipedia.
For example this URI in Farsi: https://fa.wikipedia.org/wiki/جاوااسکریپت

Thank you.

[LinusBorg]

This URL _is_ escaped - the browser just shows the unescaped characters for readability.

Test it yourself:

• open the iwkipedia link
• copy the url from the address bar
• paste it inside an editor.

Result:

So there is not way to have truly non-escaped URLs that I am aware of. Because they have to follow the standard, which requires these characters to be escaped.

[posva]

It's weird to have those escaped on the browser bar though. We should check if we can make it look pretty on the navbar

edit: tested and the browser displays the url just fine: http://fiddle.jshell.net/kxzey6jx/1/show/light/#/طراحی_نرم‌افزار

[posva]

@oMolloMo Where is this not working?

It works fine on chrome

[zackfroo]

The following code is the one I am using. The slug values in this code are in a foreign language.
<ul>
<li v-for="item in category.items">
<router-link :to="{ name: 'item.show', params: { slug: item.slug } }">
{{item.name}}
</router-link>
</li>
</ul>

this is how it is rendered in the navigator's source code (chrome):
<a href="/%D9%85%D8%AD%D8%A7%D8%B1%D8%A8%D8%A9-%D8%A7%D8%A8%D9%86-%D8%B3%D9%8A%D9%81%D8%A7" class="">
محاربة ابن سيفا
</a>

As you can see the characters are escaped. My problem is when I click on the link the web browser keeps the escaped characters in the URL bar which I don't want. I want the actual foreign characters to display in the browser's bar.

What I get in the browser's bar after I click on the item's link is the following:
http://localhost:8001/#/%D9%85%D8%AD%D8%A7%D8%B1%D8%A8%D8%A9-%D8%A7%D8%A8%D9%86-%D8%B3%D9%8A%D9%81%D8%A7

In your example you hard coded the foreign characters within the router in the path property. My example passes the Farsi string as a route parameter. Could you please see if it works for you.

The following is the definition of my router:
export var router = new VueRouter({
routes: [
{
path: '/:slug',
name: 'item.show',
component: ItemShow
}
]
})

Thank you.

EDIT: Between IE, Firefox and Chrome, Firefox is the only browser that converts the percent characters to their corresponding foreign letter for this example.

[zackfroo]

After multiple tests. I finally came out with a solution. Once I remove the hashbang # from the vue-router urls, the foreign characters finally displayed correctly in the web browser's URL bar.

I removed the hashbang # by setting 'mode' to 'history' in the VueRouter instance:

export var router = new VueRouter({
mode: 'history',
routes: [
...

After this setup now it is working fine on Chrome. The hashbang in the url was the problem.
Even though I don't completely understand the logic behind this solution, it is a quick fix for my problem.

Thanks

[gaoyangxiaozhu]

I've met the same problem too.
Because I'm being using vue.js to develop a hexo static blog theme, I cannot like @oMolloMo to solve this problem by setting the history attribute of the router instance.

So in hashbang mode, how can I leave all the special characters(such as Chinese character) in the url.

The following code is the one I am using. The params.category in this code are chinese language.

<ul>
<a v-link :path="{ name: 'category', params: { category: '前端笔记' } }">
{{　前端笔记　}}
</a>
</li>
</ul>

this is how it is rendered in the navigator's source code (chrome):

<a href="/category/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0">
前端笔记
</a>

What I get in the browser's bar after I click on the link is the following:
http://localhost:3000/#!/category/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0

But the result I actually want is:
http://localhost:3000/#!/category/前端笔记

Can anyone help me ? Thank you!

the version of vue-router I'm using is 0.7.13

@LinusBorg @posva

[gaoyangxiaozhu]

Just like @posva said: _It's weird to have those escaped on the browser bar_ . So I think it is a basic requirements to show url in a readable manner in navbar.

[posva]

@gaoyangxiaozhu Please use the forums for your question. The uri encoding is something needed to work across all browsers.
If you pass the param directly into the url path it won't be encoded: :to="'/path/' + '前端'"

[og-neth]

In Firefox I do not get any URI encoding. Seems Chrome does this as well as Microsoft Edge... kind of lame, it doesn't make the URL friendly especially in an app where that can be shared outside a firewall for authentication with a token for viewing later...

I set this with path in a this.$router.push({path: '/', query: myQuery}) approach

[posva]

FYI: URLs must be encoded. Some browsers like Firefox and Chrome visually decode the URL so they are readable but they still hold the encoded version and so does Vue Router. However, we try decoding those values in params and query for convenience reasons.
For this reason, links generated must hold an encoded href. That's spec compliant and works across browsers. Some browsers show the decoded (user-friendly URL) but some don't and unfortunately, we cannot change that. It can also change between hash mode and history mode

In Vue Router v3, there are a few inconsistencies but most browsers pick those up.
In Vue Router v4, it's consistent and path and fullPath are encoded while params and query are not