fix(router-link): active class with encoded params

examples/route-matching/app.js

@@ -21,7 +21,9 @@ const router = new VueRouter({
     // asterisk can match anything
     { path: '/asterisk/*' },
     // make part of the path optional by wrapping with parens and add "?"
-    { path: '/optional-group/(foo/)?bar' }
+    { path: '/optional-group/(foo/)?bar' },
+    // processing routes with special characters
+    { path: '/special/:word', name: 'special' }
   ]
 })
 
@@ -41,6 +43,8 @@ new Vue({
         <li><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></li>
         <li><router-link to="/optional-group/bar">/optional-group/bar</router-link></li>
         <li><router-link to="/optional-group/foo/bar">/optional-group/foo/bar</router-link></li>
+        <li><router-link :to="encodeURI('/special/tést1')">/special/tést1</router-link></li>
+        <li><router-link :to="{ name: 'special', params: {word: 'tést2'} }">/special/tést2</router-link></li>
       </ul>
       <p>Route context</p>
       <pre>{{ JSON.stringify($route, null, 2) }}</pre>

src/history/html5.js

@@ -90,5 +90,5 @@ export function getLocation (base: string): string {
   if (base && path.toLowerCase().indexOf(base.toLowerCase()) === 0) {
     path = path.slice(base.length)
   }
-  return (path || '/') + window.location.search + window.location.hash
+  return encodeURI((path || '/')) + window.location.search + window.location.hash
 }

test/e2e/specs/route-matching.js

@@ -9,7 +9,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/route-matching/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 10)
+      .assert.count('li a', 12)
       .assert.evaluate(
         function () {
           var route = JSON.parse(document.querySelector('pre').textContent)
@@ -176,6 +176,62 @@ module.exports = {
         null,
         '/optional-group/foo/bar'
       )
+
+      .click('li:nth-child(11) a')
+      .assert.evaluate(
+        function () {
+          var route = JSON.parse(document.querySelector('pre').textContent)
+          return (
+            route.matched.length === 1 &&
+            route.matched[0].path === '/special/:word' &&
+            route.fullPath === encodeURI('/special/tést1') &&
+            JSON.stringify(route.params) ===
+              JSON.stringify({
+                word: 'tést1'
+              })
+          )
+        },
+        null,
+        '/optional-group/special/tést1'
+      )
+
+      .click('li:nth-child(12) a')
+      .assert.evaluate(
+        function () {
+          var route = JSON.parse(document.querySelector('pre').textContent)
+          return (
+            route.matched.length === 1 &&
+            route.matched[0].path === '/special/:word' &&
+            route.fullPath === encodeURI('/special/tést2') &&
+            JSON.stringify(route.params) ===
+              JSON.stringify({
+                word: 'tést2'
+              })
+          )
+        },
+        null,
+        '/optional-group/special/tést2'
+      )
+
+      .url('http://localhost:8080/route-matching/special/tést1')
+      .waitForElementVisible('#app', 1000)
+      .assert.evaluate(
+        function () {
+          return document.querySelector('li:nth-child(11) a').classList.contains('router-link-active')
+        },
+        null,
+        '/optional-group/special/tést1 init active router'
+      )
+
+      .url('http://localhost:8080/route-matching/special/tést2')
+      .waitForElementVisible('#app', 1000)
+      .assert.evaluate(
+        function () {
+          return document.querySelector('li:nth-child(12) a').classList.contains('router-link-active')
+        },
+        null,
+        '/optional-group/special/tést2 init active router'
+      )
       .end()
   }
 }