Linking to fragments causes HTML5 history based router to trigger a redirect to base URL

[rolftimmermans]

I have this router:

const router = new VueRouter({
  mode: "history",
  base: "/foo",
  routes: [
    { path: "/invoices", component: Invoicing },
  ],
})

On one page, there is this link:

<a href="#order">order product</a>

When the link is clicked, it causes a redirect to /foo! That's not expected given that I use HTML5 history mode.

I can see it is caused by this line: https://github.com/vuejs/vue-router/blob/dev/src/history/html5.js#L26

A hash change causes a HTML popstate event, which causes the router to redirect. I don't want that, I actually never want the router to do anything when the hash of the URL changes. To me this seems like a bug. Am I missing something?

(Note; I can understand this behaviour for hash mode, but I am using history mode)

[LinusBorg]

Hi @rolftimmermans

thank you for your filing this issue.

Please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If nessessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted .

Thank you.

[rolftimmermans]

An example app is in https://github.com/rolftimmermans/vue-router

After starting, visit /index, click the link, and observe redirection to /foo/, even though /index is not below the base of the router, nor is any component ever rendered.

[LinusBorg]

Sure that's the right link? the content seems incomplete, mainly because there's no Vue instance being created in main.js.

My small test on jsfiddle works as intended:

https://jsfiddle.net/Linusborg/japjsnch/1/

[rolftimmermans]

Yes, it demonstrates the issue, especially without the Vue instance. Only the router is needed. Note though that the URL /index matches the path in one of the routes /index (even though in reality that URL should be /foo/index). I had to make it /index because I couldn't quite figure out how to rename the index.html file in the example and have webpack not complain about it.

[rolftimmermans]

To be clear, it seems to be also partially related to the fact that the base is ignored when matching URLs. That doesn't seem quite right either. (That is: both /index and /foo/index match a route defined as /index with a base set to /foo. I'd expect only /foo/index to match).

[posva]

@rolftimmermans There's no point in using VueRouter without Vue...
Please, as @LinusBorg asked at the beginning provide a proper repro, in a jsfiddle ideally

[rolftimmermans]

You can try rolftimmermans/vue-router@2e24121 if you insist on a Vue instance. The issue then is subtly different, visiting /index immediately redirects to /foo/, which I also don't expect, since /index is not below /foo.

[rolftimmermans]

Also, for clarity: I can't make a jsfiddle out of this because it depends on having the URL match the path specified in the router, and I can't reproduce it with /. (Even if it's possible to change the URL with jsfiddle I can't figure out how.)

[posva]

About the index you cancel the navigation so it's normal to just go to the root path if there was no previous route. You can control the behaviour though

What isn't working? everything seems to be working on the example. Any specific browser?

[rolftimmermans]

The problems I have are:

1. Creating a new router with new VueRouter causes side effects on hash change, even if it's not used on this page.

2. Even if the router is used, it will in some cases modify the URL if the current URL is not below the specified base URL. It's because it will happily match the path to the defined routes, ignoring the specified base. The code example I gave demonstrates this behaviour. I'd expect the router to never do anything if the URL is not below base.

Both are really surprising to me. I have a router that is used only on a subset of static pages, and it is interfering with other pages. I have already established that I can work around the issues, but I at least wanted to let you know.

If vue-router is only intended to be used by an entire app and if you feel that my use case is an explicit non-goal of the project then of course feel free to close this. In that case I apologise for wasting your time. 🙂

[posva]

Well, there's no point in instantiating it if you're not going to use it 😄

Base is meant to be the base url of your SPA as said in http://router.vuejs.org/en/api/options.html#base

I don't know about your project but it looks like you don't need vue-router, you can probably use dynamic components although you'll have to manipulate the URLs yourself

Cheers

[rolftimmermans]

I definitely need and want vue-router, but only for a part of the application. That's where the friction is, probably.