diff --git a/examples/hash-scroll-behavior/app.js b/examples/hash-scroll-behavior/app.js index 0f1667e79..5cda05068 100644 --- a/examples/hash-scroll-behavior/app.js +++ b/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 }}, diff --git a/examples/index.html b/examples/index.html index f2bdf7225..13dcb3793 100644 --- a/examples/index.html +++ b/examples/index.html @@ -21,6 +21,7 @@

Vue Router Examples

  • Data Fetching
  • Navigation Guards
  • Scroll Behavior
  • +
  • Hash Scroll Behavior
  • Lazy Loading
  • Auth Flow
  • Discrete Components
  • diff --git a/src/history/hash.js b/src/history/hash.js index 330f2383c..bd2018945 100644 --- a/src/history/hash.js +++ b/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 } } diff --git a/src/index.js b/src/index.js index a1a7b8507..8bbfc21c5 100644 --- a/src/index.js +++ b/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) diff --git a/test/e2e/specs/hash-mode.js b/test/e2e/specs/hash-mode.js index d32d4d0dd..1c0f8f865 100644 --- a/test/e2e/specs/hash-mode.js +++ b/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() } }