posva
commented
4 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 Vue Router perspective, this normalization is really useful to keep consistent behavior. 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. If you want to have a URL, you can always create a custom history that matches your need
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