Disable URL hash encoding or whitelist some symbols to make VueRouter work fine with Telegram WebApps

[Raxort]

What problem is this solving

I am building a Telegram WebApp with Nuxt and I am faced with an issue. When you open the app in Telegram, telegram adds special params to the URL so the app can communicate with TG. These params are added as website hash and the URL of the webapp looks like this

https://yourapp.com/#tgWebAppData=query_id%3DAAGZbY...

But after I refresh the WebApp in Telegram the URL becomes like this:
https://yourapp.com/#tgWebAppData=query_id=AAGZbY...

The hash param in the URL gets encoded and this completely breaks the connection between the app and TG because now Telegram WebApp JS file https://telegram.org/js/telegram-web-app.js can’t read the params correctly.

How can I disable URL encoding for symbols like %3D and some others to make the WebApp work correctly? It’s a serious issue because Telegram WebApps are becoming more popular. It would be great if we could whitelist some symbols we want. Flexibility is always great.

Proposed solution

Disable URL hash encoding completely
Or add the ability/option to whitelist some symbols so they are not encoded.
Or allow developers to change encoding rules for URLs.

This will make VueRouter work fine with Telegram WebApps.

Describe alternatives you've considered

No response

[posva]

It's interesting they parse the URL like this. I would consider this a Telegram bug because you are not supposed to encode the = character on the hash part of the URL.
From the Vue Router's perspective, this normalization is really useful for maintaining consistent behaviour. You can, however, already get out of this behavior by using the Memory history (createMemoryHistory()). It seems like the appropriate history for a Telegram app. Another possibility is to read the hash before calling app.use(router) which initiates the navigation and therefore the builtin normalization. Allowing you to consume the hash and normalize it to fit your own needs.
If you want to have a URL, you can also create a custom history that matches the needs of a Telegram app

[Raxort]

Sorry, I didn't provide full request. They are not encoding all the = characters. Only for some parts of the URL. Here is full hash:

Before:
#tgWebAppData=query_id%3DAAEK1wFcAAAAAArXAVwVu0Dq%26user%3D%257B%2522id%2522%253A1543624458%252C%2522first_name%2522%253A%2522Deptyped%2522%252C%2522last_name%2522%253A%2522%2522%252C%2522username%2522%253A%2522deptyped%2522%252C%2522language_code%2522%253A%2522en%2522%252C%2522allows_write_to_pm%2522%253Atrue%257D%26auth_date%3D1709286347%26hash%3D94acc4d7e17a1d33a47ec5624aef8ebec1d6664e2b37107ddcc4a3fb840f62a9&tgWebAppVersion=7.0&tgWebAppPlatform=weba&tgWebAppThemeParams=%7B%22bg_color%22%3A%22%23212121%22%2C%22text_color%22%3A%22%23ffffff%22%2C%22hint_color%22%3A%22%23aaaaaa%22%2C%22link_color%22%3A%22%238774e1%22%2C%22button_color%22%3A%22%238774e1%22%2C%22button_text_color%22%3A%22%23ffffff%22%2C%22secondary_bg_color%22%3A%22%230f0f0f%22%2C%22header_bg_color%22%3A%22%23212121%22%2C%22accent_text_color%22%3A%22%238774e1%22%2C%22section_bg_color%22%3A%22%23212121%22%2C%22section_header_text_color%22%3A%22%23aaaaaa%22%2C%22subtitle_text_color%22%3A%22%23aaaaaa%22%2C%22destructive_text_color%22%3A%22%23e53935%22%7D

After VueRouter's encoding
#tgWebAppData=query_id=AAEK1wFcAAAAAArXAVwVu0Dq&user={%22id%22:1543624458,%22first_name%22:%22Deptyped%22,%22last_name%22:%22%22,%22username%22:%22deptyped%22,%22language_code%22:%22en%22,%22allows_write_to_pm%22:true}&auth_date=1709286347&hash=94acc4d7e17a1d33a47ec5624aef8ebec1d6664e2b37107ddcc4a3fb840f62a9&tgWebAppVersion=7.0&tgWebAppPlatform=weba&tgWebAppThemeParams={%22bg_color%22:%22#212121%22,%22text_color%22:%22#ffffff%22,%22hint_color%22:%22#aaaaaa%22,%22link_color%22:%22#8774e1%22,%22button_color%22:%22#8774e1%22,%22button_text_color%22:%22#ffffff%22,%22secondary_bg_color%22:%22#0f0f0f%22,%22header_bg_color%22:%22#212121%22,%22accent_text_color%22:%22#8774e1%22,%22section_bg_color%22:%22#212121%22,%22section_header_text_color%22:%22#aaaaaa%22,%22subtitle_text_color%22:%22#aaaaaa%22,%22destructive_text_color%22:%22#e53935%22}

So you have a better understanding what TG does.