Vue-router: base option is case sensitive

[dev-shane]

Version

2.8.1

Reproduction link

https://github.com/dev-shane/vue-router-bug-demo

Steps to reproduce

My app is served under /app/, then I have config /src/router/index.js as follow

export default new Router({
  mode: 'history',
  base: '/app',
  routes: [
    {
      path: '/',
      name: 'Index',
      redirect: {name: 'Home'}
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '*',
      name: '/error',
      component: Error
    }
  ]
})

But I got this result
http://localhost:8080/app/home to /home
http://localhost:8080/app/Home to /home
http://localhost:8080/App/home to /error
http://localhost:8080/App/Home to /error

What is expected?

http://localhost:8080/app/home to /home
http://localhost:8080/app/Home to /home
http://localhost:8080/App/home to /home
http://localhost:8080/App/Home to /home

What is actually happening?

http://localhost:8080/app/home to /home
http://localhost:8080/app/Home to /home
http://localhost:8080/App/home to /error
http://localhost:8080/App/Home to /error

[emanuelmutschlechner]

Can confirm, is this a bug?
https://codesandbox.io/s/rjv9oj6yoq

[posva]

it shouldn't matter in most cases as the base is something that comes from outside your application but it would be better for it to be case-insensitive by default, like the rest of the url

[PikminGuts92]

I think I've found the issue. It appears to only affect router when in history mode. It's performing a case-sensitive comparison to remove the base path. Adding a couple toLowerCase() calls should fix it. If that's an acceptable solution I'm willing to put in a pull request and add some unit tests.

https://github.com/vuejs/vue-router/blob/1c00c9fb9c93ffd7f35f3a3cf242333ae11d13ab/src/history/html5.js#L74-L80

[PikminGuts92]

Maybe even use a case-insensitive regex search instead. I'm not sure which is better performance wise.

[DinsmoreDesign]

Just ran into this issue myself. In my case, I don't hit an error, because our app is hosted at /Locations on the server and a /Locations exists in the Router, but this is still really strange:

domain.com/Locations => Home component ("/")
domain.com/locations => Home/Locations component ( "/Locations")

Any other URL with the lowercase /locations will hit a 404. Any news on a fix being released for this?

[GHakopian]

Any news on this? is there any workaround?

[PikminGuts92]

@GHakopian @DinsmoreDesign Here's the snippet of code I had used for our workaround. Basically it just replaces the one vue-router function I referenced above.

// Define router
const router = new VueRouter({
  base: config.basePath,
  routes,
  mode: 'history'
})

// Route case-sensitivity hotfix
if (router.mode === 'history') {
  router.history.getCurrentLocation = function() {
    let path = window.location.pathname
    let base = router.history.base

    // Removes base from path (case-insensitive)
    if (base && path.toLowerCase().indexOf(base.toLowerCase()) === 0) {
      path = path.slice(base.length)
    }

    return (path || '/') + window.location.search + window.location.hash
  }
}

[ThatWionGuy]

Ran into this issue today using v3.1.6, this has been on Long term roadmap for almost a year and is marked as a high priority. It is one line of code to make urls case-insensitive as the web standards allow. Can we get an update on when this will be fixed? I have used the fix proposed by PikminGuts92 and it works but this is still a hack and would prefer a permanent fix for a production application.