From 17ef8691c14af4493a5f346318d3464e644c933a Mon Sep 17 00:00:00 2001 From: Thorsten Date: Thu, 20 Oct 2016 22:19:04 +0200 Subject: [PATCH] router link now sets a hash path to href when using hash-mode. --- examples/hash-mode/app.js | 42 +++++++++++++++++++++++++++++++++++ examples/hash-mode/index.html | 6 +++++ examples/index.html | 1 + src/components/link.js | 7 +++++- test/e2e/specs/hash-mode.js | 35 +++++++++++++++++++++++++++++ 5 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 examples/hash-mode/app.js create mode 100644 examples/hash-mode/index.html create mode 100644 test/e2e/specs/hash-mode.js diff --git a/examples/hash-mode/app.js b/examples/hash-mode/app.js new file mode 100644 index 000000000..ebc1aba4e --- /dev/null +++ b/examples/hash-mode/app.js @@ -0,0 +1,42 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' + +// 1. Use plugin. +// This installs and , +// and injects $router and $route to all router-enabled child components +Vue.use(VueRouter) + +// 2. Define route components +const Home = { template: '
home
' } +const Foo = { template: '
foo
' } +const Bar = { template: '
bar
' } + +// 3. Create the router +const router = new VueRouter({ + mode: 'hash', + base: __dirname, + routes: [ + { path: '/', component: Home }, // all paths are defined without the hash. + { path: '/foo', component: Foo }, + { path: '/bar', component: Bar } + ] +}) + +// 4. Create and mount root instance. +// Make sure to inject the router. +// Route components will be rendered inside . +new Vue({ + router, + template: ` +
+

Basic

+
    +
  • /
    • +
  • /foo
    • +
  • /bar
    • + /bar +
+ +
+ ` +}).$mount('#app') diff --git a/examples/hash-mode/index.html b/examples/hash-mode/index.html new file mode 100644 index 000000000..c60325b10 --- /dev/null +++ b/examples/hash-mode/index.html @@ -0,0 +1,6 @@ + + +← Examples index +
+ + diff --git a/examples/index.html b/examples/index.html index 2a0bb66ba..358d5f3fa 100644 --- a/examples/index.html +++ b/examples/index.html @@ -8,6 +8,7 @@

Vue Router Examples

  • Basic
    • +
  • Mode: 'hash'
  • Nested Routes
  • Named Routes
  • Named Views
    • diff --git a/src/components/link.js b/src/components/link.js index 63c179fbd..92ebc310c 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -30,7 +30,7 @@ export default { const resolved = router.match(to) const fullPath = resolved.redirectedFrom || resolved.fullPath const base = router.history.base - const href = base ? cleanPath(base + fullPath) : fullPath + const href = createHref(base, fullPath, router.mode) const classes = {} const activeClass = this.activeClass || router.options.linkActiveClass || 'router-link-active' const compareTarget = to.path ? createRoute(null, to) : resolved @@ -97,3 +97,8 @@ function findAnchor (children) { } } } + +function createHref (base, fullPath, mode) { + var path = mode === 'hash' ? '/#' + fullPath : fullPath + return base ? cleanPath(base + path) : path +} diff --git a/test/e2e/specs/hash-mode.js b/test/e2e/specs/hash-mode.js new file mode 100644 index 000000000..d6b74369f --- /dev/null +++ b/test/e2e/specs/hash-mode.js @@ -0,0 +1,35 @@ +module.exports = { + 'Hash mode': function (browser) { + browser + .url('http://localhost:8080/hash-mode/') + .waitForElementVisible('#app', 1000) + .assert.count('li', 4) + .assert.count('li a', 3) + .assert.attributeContains('li:nth-child(1) a', 'href', '/hash-mode/#/') + .assert.attributeContains('li:nth-child(2) a', 'href', '/hash-mode/#/foo') + .assert.attributeContains('li:nth-child(3) a', 'href', '/hash-mode/#/bar') + .assert.containsText('.view', 'home') + + .click('li:nth-child(2) a') + .assert.urlEquals('http://localhost:8080/hash-mode/#/foo') + .assert.containsText('.view', 'foo') + + .click('li:nth-child(3) a') + .assert.urlEquals('http://localhost:8080/hash-mode/#/bar') + .assert.containsText('.view', 'bar') + + .click('li:nth-child(1) a') + .assert.urlEquals('http://localhost:8080/hash-mode/#/') + .assert.containsText('.view', 'home') + + .click('li:nth-child(4)') + .assert.urlEquals('http://localhost:8080/hash-mode/#/bar') + .assert.containsText('.view', 'bar') + + // check initial visit + .url('http://localhost:8080/hash-mode/#/foo') + .waitForElementVisible('#app', 1000) + .assert.containsText('.view', 'foo') + .end() + } +}