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 @@ <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> 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() } }