posva
commented
8 months ago 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
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