Vue-router: the url pattern is not conform to the URI generic syntax in the newest version 3.1.0

[yangshuan]

Version

3.1.0

Reproduction link

https://github.com/yangshuan/vue-router-test-3.1.1

Steps to reproduce

Steps are very simple:

1. Use the vue-cli to generate a new empty project;
2. Start the project;
3. Open a browser (e.g. Chrome), and open the application index page;
4. Everything seems normal, but if you use url with parameters, e.g. http://localhost:8080/?a=1, the page will goto http://localhost:8080/#/?a=1, the uri is not right, it should be 'http://localhost:8080/?a=1#/'

What is expected?

The URI should always be conform to the URI generic syntax 'scheme:[//authority]path[?query][#fragment]', otherwise most of the lib or code which get the parameters from the URI will fail.

What is actually happening?

this url is not conform to the URI generic syntax which is 'scheme:[//authority]path[?query][#fragment]';
The problem the 3.1.0 version brings out is that, when we want to get the parameters from the URL by the default URI generic syntax, we fail all the time, since the uri is not right.

[yangshuan]

The URI syntax refers to https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Definition

[posva]

This was introduced to easily allow some oath services like GitHub as seen in https://github.com/vuejs/vue-router/issues/2125
I'm happy to revert the commit and provide a workaround if this is breaking other libs but I would need a real example that breaks not a link to the URI definition. Did this break anything for you?

[cranberrieman]

Hello @posva .

I work on the wordpress site and on the admin side url to post page looks like this: /wp-admin/post.php?post=123
And for me routes like /wp-admin/post.php?post=123#/home were fine.
But after update vue-router to the new version this was changed to /wp-admin/post.php#/home?post=123 and this breaks everything.
(For example, if I click on tab "details", url will be changed to /wp-admin/post.php#/details, which is in fact another page)
I tried to set base param in config to window.location.pathname + window.location.search, but it didn't helped.

Can you please advice to me any workaround? Thanks in advance.

[posva]

Interesting, I really thought nobody was using that. Since the query can be accessed on server while the hash cannot, I think it makes sense to revert this behavior since you could theorically send different pages from the server with a different query

The workaround is for the other issue, not for this one

[cranberrieman]

since you could theorically send different pages from the server with a different query

In case of wordpress, it's really so, because here everything is a "post": products, orders, news, etc.
And on the admin side url always looks like /wp-admin/post.php?post=123, but depending on post id page looks absolutely different.

[posva]

Do you know of wordpress plugins using Vue Router like this? I would like to search a bit more because I'm curious

[cranberrieman]

I doubt, that my case is widespread, because in general I've seen not a lot of examples of using Vue in wordpress plugins.
For combination of using vue-router on the admin side I found only this boilerplate: https://github.com/0aveRyan/wordpress-day-spa
But I searched only briefly, because I needed just an example, whether it's possible at all.

Thank you for the help!

[yangshuan]

This was introduced to easily allow some oath services like GitHub as seen in #2125
I'm happy to revert the commit and provide a workaround if this is breaking other libs but I would need a real example that breaks not a link to the URI definition. Did this break anything for you?

1. The lib url-parse (refer to https://www.npmjs.com/package/url-parse) will be break if the uri doesn't follow the uri syntax, you can try it out.
2. Recently all of my applications in my company met this issue. we have a SSO service which has its own login page, and it sends parameters in the URL. when the other applications integrate with the SSO, code 'window.location.search' helps us to get the parameters from the url for login usage. Unfortunately after upgrade to 3.3.0, everything failed.
3. Another case is that in Java the URI syntax is '[scheme:][//authority][path][?query][#fragment]'(refer to https://docs.oracle.com/en/java/javase/12/docs/api/java.base/java/net/URI.html), sometimes I need to send the URL to my backend which is built on Java, I can't use the default method to parse the URI generated by vuejs.

I agree parsing the uri in string by ourselves is a work around for this, but following the uri syntax can save a lot time for everyone.
Please think about it, it really help. Thanks.