fix(hash): allow base tag different from base parameter

posva · posva · commit 85b1bff96fbb · 2021-01-04T13:06:47.000+01:00
Fix #685
diff --git a/__tests__/history/html5.spec.ts b/__tests__/history/html5.spec.ts
@@ -95,7 +95,7 @@ describe('History HTMl5', () => {
 
   it('calls push with hash part of the url with a base', () => {
     dom.reconfigure({ url: 'file:///usr/etc/index.html' })
-    let history = createWebHistory('/usr/etc/index.html#/')
+    let history = createWebHistory('#')
     let spy = jest.spyOn(window.history, 'pushState')
     history.push('/foo')
     expect(spy).toHaveBeenCalledWith(
diff --git a/docs/api/index.md b/docs/api/index.md
@@ -227,10 +227,9 @@ export declare function createWebHashHistory(base?: string): RouterHistory
 
 ### Parameters
 
-| Parameter | Type     | Description                                                                                                                                                                                                                                                                                                                                                  |
-| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| base      | `string` | optional base to provide. Defaults to `location.pathname` or `/` if at root. If there is a `<base>` tag in the `head`, its value will be ignored in favor of this parameter **but note it affects all the history.pushState() calls**, meaning that if you use a `<base>` tag, its `href` value **has to match this parameter** (ignoring anything after the |
-| `#`)      |
+| Parameter | Type     | Description                                                                                                                                                                                                                                                                                                                                                       |
+| --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| base      | `string` | optional base to provide. Defaults to `location.pathname + location.search`. If there is a `<base>` tag in the `head`, its value will be ignored in favor of this parameter **but note it affects all the history.pushState() calls**, meaning that if you use a `<base>` tag, its `href` value **has to match this parameter** (ignoring anything after the `#`) |
 
 ### Examples
 
diff --git a/e2e/hash/index.ts b/e2e/hash/index.ts
@@ -20,7 +20,7 @@ const Unicode: RouteComponent = {
 const router = createRouter({
   // keep a trailing slash in this specific case because we are using a hash
   // history
-  history: createWebHashHistory('/' + __dirname + '/#/'),
+  history: createWebHashHistory(),
   routes: [
     { path: '/', component: Home },
     { path: '/redirect', name: 'redirect', redirect: '/foo' },
diff --git a/e2e/specs/hash.js b/e2e/specs/hash.js
@@ -62,6 +62,7 @@ module.exports = {
       .execute(function () {
         window.history.replaceState(history.state, '', '/hash/#/foo')
       })
+      .assert.urlEquals(baseURL + '/foo')
       .click('li:nth-child(3) a')
       .assert.urlEquals(baseURL + '/bar')
       .back()
diff --git a/src/history/hash.ts b/src/history/hash.ts
@@ -6,8 +6,8 @@ import { warn } from '../warning'
  * Creates a hash history. Useful for web applications with no host (e.g.
  * `file://`) or when configuring a server to handle any URL is not possible.
  *
- * @param base - optional base to provide. Defaults to `location.pathname` or
- * `/` if at root. If there is a `<base>` tag in the `head`, its value will be
+ * @param base - optional base to provide. Defaults to `location.pathname +
+ * location.search` If there is a `<base>` tag in the `head`, its value will be
  * ignored in favor of this parameter **but note it affects all the
  * history.pushState() calls**, meaning that if you use a `<base>` tag, it's
  * `href` value **has to match this parameter** (ignoring anything after the
@@ -32,7 +32,7 @@ export function createWebHashHistory(base?: string): RouterHistory {
   // Make sure this implementation is fine in terms of encoding, specially for IE11
   // for `file://`, directly use the pathname and ignore the base
   // location.pathname contains an initial `/` even at the root: `https://example.com`
-  base = location.host ? base || location.pathname : ''
+  base = location.host ? base || location.pathname + location.search : ''
   // allow the user to provide a `#` in the middle: `/base/#/app`
   if (base.indexOf('#') < 0) base += '#'
 
diff --git a/src/history/html5.ts b/src/history/html5.ts
@@ -202,11 +202,21 @@ function useHistoryStateNavigation(base: string) {
     state: StateEntry,
     replace: boolean
   ): void {
-    // when the base has a `#`, only use that for the URL
+    /**
+     * if a base tag is provided and we are on a normal domain, we have to
+     * respect the provided `base` attribute because pushState() will use it and
+     * potentially erase anything before the `#` like at
+     * https://github.com/vuejs/vue-router-next/issues/685 where a base of
+     * `/folder/#` but a base of `/` would erase the `/folder/` section. If
+     * there is no host, the `<base>` tag makes no sense and if there isn't a
+     * base tag we can just use everything after the `#`.
+     */
     const hashIndex = base.indexOf('#')
     const url =
       hashIndex > -1
-        ? base.slice(hashIndex) + to
+        ? (location.host && document.querySelector('base')
+            ? base
+            : base.slice(hashIndex)) + to
         : createBaseLocation() + base + to
     try {
       // BROWSER QUIRK
