fix(hash): allow base with non trailing slash

Close #247

BREAKING CHANGE: When providing a base for hash histories, it is now necessary
to include a traling slash to create a url that starts with `/#/`, otherwise it
will result in a url starting with `#/`. This allows users to use the routing
system directly in simple files without needing to configure a server at all:
  - `https://example.com/file.html` + `base: 'file.html` will produce a final
    url of `https://example.com/file.html#/`
  - `https://example.com/folder` + `base: 'folder` will produce a final url of
    `https://example.com/folder#/`
  - `https://example.com/folder` + `base: 'folder/` will produce a final url of
    `https://example.com/folder/#/`

diff --git a/__tests__/history/hash.spec.ts b/__tests__/history/hash.spec.ts
index 1efffcb5294f3c072ae6329c629a51b465bd111f..50cfcdc94f75bc6565c90e2d340cd3cd6758d7f2 100644 (file)
--- a/__tests__/history/hash.spec.ts
+++ b/__tests__/history/hash.spec.ts
@@ -36,7 +36,7 @@ describe('History Hash', () => {
       dom.reconfigure({ url: 'https://example.com' })
     })
 
-    it('should use a correct', () => {
+    it('should use a correct base', () => {
       createWebHashHistory()
       expect(createWebHistory).toHaveBeenCalledWith('/#')
     })
@@ -48,15 +48,7 @@ describe('History Hash', () => {
 
     it('should be able to provide a base with no trailing slash', () => {
       createWebHashHistory('/folder')
-      expect(createWebHistory).toHaveBeenCalledWith('/folder/#')
-    })
-
-    it('should read the base tag', () => {
-      const baseEl = document.createElement('base')
-      baseEl.href = '/foo/'
-      document.head.appendChild(baseEl)
-      createWebHashHistory()
-      expect(createWebHistory).toHaveBeenCalledWith('/foo/#')
+      expect(createWebHistory).toHaveBeenCalledWith('/folder#')
     })
 
     it('should use the base option over the base tag', () => {

diff --git a/e2e/hash/index.ts b/e2e/hash/index.ts
index 8de3d1add81309ed54c5bd5b221cc2229094ac3a..5b014b4e65d8392fa7bef3ba7983f5ce51643260 100644 (file)
--- a/e2e/hash/index.ts
+++ b/e2e/hash/index.ts
@@ -18,7 +18,9 @@ const Unicode: RouteComponent = {
 }
 
 const router = createRouter({
-  history: createWebHashHistory('/' + __dirname),
+  // keep a trailing slash in this specific case because we are using a hash
+  // history
+  history: createWebHashHistory('/' + __dirname + '/'),
   routes: [
     { path: '/', component: Home },
     { path: '/foo', component: Foo },

diff --git a/src/history/hash.ts b/src/history/hash.ts
index f9a648682e885ca7664529da3d025db41479e5e5..1c1286be5c4ff2732ffda1baffa6c937ff89a8be 100644 (file)
--- a/src/history/hash.ts
+++ b/src/history/hash.ts
@@ -1,7 +1,7 @@
-import { RouterHistory, normalizeBase } from './common'
+import { RouterHistory } from './common'
 import { createWebHistory } from './html5'
 
-export function createWebHashHistory(base?: string): RouterHistory {
+export function createWebHashHistory(base: string = '/'): RouterHistory {
   // Make sure this implementation is fine in terms of encoding, specially for IE11
-  return createWebHistory(location.host ? normalizeBase(base) + '/#' : '#')
+  return createWebHistory(location.host ? base + '#' : '#')
 }