Fix hash mode deep links (#2125)

examples/hash-scroll-behavior/app.js

@@ -52,6 +52,7 @@ const scrollBehavior = (to, from, savedPosition) => {
 
 const router = new VueRouter({
   mode: 'hash',
+  base: __dirname,
   scrollBehavior,
   routes: [
     { path: '/', component: Home, meta: { scrollToTop: true }},

examples/index.html

@@ -21,6 +21,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="data-fetching">Data Fetching</a></li>
     <li><a href="navigation-guards">Navigation Guards</a></li>
     <li><a href="scroll-behavior">Scroll Behavior</a></li>
+    <li><a href="hash-scroll-behavior">Hash Scroll Behavior</a></li>
     <li><a href="lazy-loading">Lazy Loading</a></li>
     <li><a href="auth-flow">Auth Flow</a></li>
     <li><a href="discrete-components">Discrete Components</a></li>

src/history/hash.js

@@ -8,10 +8,10 @@ import { setupScroll, handleScroll } from '../util/scroll'
 import { pushState, replaceState, supportsPushState } from '../util/push-state'
 
 export class HashHistory extends History {
-  constructor (router: Router, base: ?string, fallback: boolean) {
+  constructor (router: Router, base: ?string) {
     super(router, base)
     // check history fallback deeplinking
-    if (fallback && checkFallback(this.base)) {
+    if (checkFallback(this.base)) {
       return
     }
     ensureSlash()
@@ -80,10 +80,13 @@ export class HashHistory extends History {
 
 function checkFallback (base) {
   const location = getLocation(base)
-  if (!/^\/#/.test(location)) {
-    window.location.replace(
-      cleanPath(base + '/#' + location)
-    )
+  if (location !== '/' && !/^\/#/.test(location)) {
+    const path = cleanPath(base + '/#' + location)
+    if (supportsPushState) {
+      replaceState(path)
+    } else {
+      window.location.replace(path)
+    }
     return true
   }
 }

src/index.js

@@ -56,7 +56,7 @@ export default class VueRouter {
         this.history = new HTML5History(this, options.base)
         break
       case 'hash':
-        this.history = new HashHistory(this, options.base, this.fallback)
+        this.history = new HashHistory(this, options.base)
         break
       case 'abstract':
         this.history = new AbstractHistory(this, options.base)

test/e2e/specs/hash-mode.js

@@ -27,13 +27,19 @@ module.exports = {
       .assert.urlEquals('http://localhost:8080/hash-mode/#/bar')
       .assert.containsText('.view', 'bar')
 
-    // check initial visit
+      // check initial visit
       .url('http://localhost:8080/hash-mode/#/foo')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('.view', 'foo')
       .url('http://localhost:8080/hash-mode/#/%C3%A9')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('.view', 'unicode')
+
+      // check hash placed correctly
+      .url('http://localhost:8080/hash-mode/foo?page=123')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/hash-mode/#/foo?page=123')
+      .assert.containsText('.view', 'foo')
       .end()
   }
 }