router link now sets a hash path to href when using hash-mode. (#809)

LinusBorg · fnlctrl · commit cd2f0df389d0 · 2016-10-24T17:13:06.000+08:00
diff --git a/examples/hash-mode/app.js b/examples/hash-mode/app.js
@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+// 1. Use plugin.
+// This installs <router-view> and <router-link>,
+// and injects $router and $route to all router-enabled child components
+Vue.use(VueRouter)
+
+// 2. Define route components
+const Home = { template: '<div>home</div>' }
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+// 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 <router-view>.
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Basic</h1>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/foo">/foo</router-link></li>
+        <li><router-link to="/bar">/bar</router-link></li>
+        <router-link tag="li" to="/bar">/bar</router-link>
+      </ul>
+      <router-view class="view"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/hash-mode/index.html b/examples/hash-mode/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/hash-mode.js"></script>
diff --git a/examples/index.html b/examples/index.html
@@ -8,6 +8,7 @@
   <h1>Vue Router Examples</h1>
   <ul>
     <li><a href="basic">Basic</a></li>
+    <li><a href="hash-mode">Mode: 'hash'</a></li>
     <li><a href="nested-routes">Nested Routes</a></li>
     <li><a href="named-routes">Named Routes</a></li>
     <li><a href="named-views">Named Views</a></li>
diff --git 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
@@ -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()
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export default {`
`30`	`30`	`const resolved = router.match(to)`
`31`	`31`	`const fullPath = resolved.redirectedFrom \|\| resolved.fullPath`
`32`	`32`	`const base = router.history.base`
`33`		`- const href = base ? cleanPath(base + fullPath) : fullPath`
	`33`	`+ const href = createHref(base, fullPath, router.mode)`
`34`	`34`	`const classes = {}`
`35`	`35`	`const activeClass = this.activeClass \|\| router.options.linkActiveClass \|\| 'router-link-active'`
`36`	`36`	`const compareTarget = to.path ? createRoute(null, to) : resolved`
`@@ -97,3 +97,8 @@ function findAnchor (children) {`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`	`}`
	`100`	`+`
	`101`	`+function createHref (base, fullPath, mode) {`
	`102`	`+ var path = mode === 'hash' ? '/#' + fullPath : fullPath`
	`103`	`+ return base ? cleanPath(base + path) : path`
	`104`	`+}`