fix active link matching for named routes + exact (fix #635)

Author: yyx990803

examples/active-links/app.js

@@ -25,7 +25,7 @@ const router = new VueRouter({
     { path: '/about', component: About },
     { path: '/users', component: Users,
       children: [
-        { path: ':username', component: User }
+        { path: ':username', name: 'user', component: User }
       ]
     }
   ]
@@ -50,6 +50,11 @@ new Vue({
             /users/evan?foo=bar
           </router-link>
         </li>
+        <li><!-- #635 -->
+          <router-link :to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}" exact>
+            /users/evan?foo=bar (named view + exact match)
+          </router-link>
+        </li>
         <li>
           <router-link :to="{ path: '/users/evan', query: { foo: 'bar', baz: 'qux' }}">
             /users/evan?foo=bar&baz=qux

src/components/link.js

@@ -1,12 +1,17 @@
+/* @flow */
+
 import { cleanPath } from '../util/path'
-import { isSameRoute, isIncludedRoute } from '../util/route'
+import { createRoute, isSameRoute, isIncludedRoute } from '../util/route'
 import { normalizeLocation } from '../util/location'
 
+// work around weird flow bug
+const toTypes: Array<Function> = [String, Object]
+
 export default {
   name: 'router-link',
   props: {
     to: {
-      type: [String, Object],
+      type: toTypes,
       required: true
     },
     tag: {
@@ -18,7 +23,7 @@ export default {
     replace: Boolean,
     activeClass: String
   },
-  render (h) {
+  render (h: Function) {
     const router = this.$router
     const current = this.$route
     const to = normalizeLocation(this.to, current, this.append)
@@ -28,12 +33,12 @@ export default {
     const href = base ? cleanPath(base + fullPath) : fullPath
     const classes = {}
     const activeClass = this.activeClass || router.options.linkActiveClass || 'router-link-active'
-    const compareTarget = to.path ? to : resolved
+    const compareTarget = to.path ? createRoute(null, to) : resolved
     classes[activeClass] = this.exact
       ? isSameRoute(current, compareTarget)
       : isIncludedRoute(current, compareTarget)
 
-    const data = {
+    const data: any = {
       class: classes,
       on: {
         click: (e) => {

src/create-matcher.js

@@ -2,9 +2,9 @@
 
 import Regexp from 'path-to-regexp'
 import { assert, warn } from './util/warn'
+import { createRoute } from './util/route'
 import { createRouteMap } from './create-route-map'
 import { resolvePath } from './util/path'
-import { stringifyQuery } from './util/query'
 import { normalizeLocation } from './util/location'
 
 const regexpCache: {
@@ -119,27 +119,6 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
   return match
 }
 
-export function createRoute (
-  record: ?RouteRecord,
-  location: Location,
-  redirectedFrom?: Location
-): Route {
-  const route: Route = {
-    name: location.name || (record && record.name),
-    meta: (record && record.meta) || {},
-    path: location.path || '/',
-    hash: location.hash || '',
-    query: location.query || {},
-    params: location.params || {},
-    fullPath: getFullPath(location),
-    matched: record ? formatMatch(record) : []
-  }
-  if (redirectedFrom) {
-    route.redirectedFrom = getFullPath(redirectedFrom)
-  }
-  return Object.freeze(route)
-}
-
 function matchRoute (
   path: string,
   params: Object,
@@ -188,19 +167,6 @@ function fillParams (
   }
 }
 
-function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
-  const res = []
-  while (record) {
-    res.unshift(record)
-    record = record.parent
-  }
-  return res
-}
-
 function resolveRecordPath (path: string, record: RouteRecord): string {
   return resolvePath(path, record.parent ? record.parent.path : '/', true)
 }
-
-function getFullPath ({ path, query = {}, hash = '' }) {
-  return (path || '/') + stringifyQuery(query) + hash
-}

src/history/base.js

@@ -4,8 +4,7 @@ import type VueRouter from '../index'
 import { warn } from '../util/warn'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
-import { isSameRoute } from '../util/route'
-import { createRoute } from '../create-matcher'
+import { createRoute, isSameRoute } from '../util/route'
 
 export class History {
   router: VueRouter;

src/util/route.js

@@ -1,6 +1,42 @@
 /* @flow */
-const trailingSlashRE = /\/$/
 
+import { stringifyQuery } from './query'
+
+export function createRoute (
+  record: ?RouteRecord,
+  location: Location,
+  redirectedFrom?: Location
+): Route {
+  const route: Route = {
+    name: location.name || (record && record.name),
+    meta: (record && record.meta) || {},
+    path: location.path || '/',
+    hash: location.hash || '',
+    query: location.query || {},
+    params: location.params || {},
+    fullPath: getFullPath(location),
+    matched: record ? formatMatch(record) : []
+  }
+  if (redirectedFrom) {
+    route.redirectedFrom = getFullPath(redirectedFrom)
+  }
+  return Object.freeze(route)
+}
+
+function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
+  const res = []
+  while (record) {
+    res.unshift(record)
+    record = record.parent
+  }
+  return res
+}
+
+function getFullPath ({ path, query = {}, hash = '' }) {
+  return (path || '/') + stringifyQuery(query) + hash
+}
+
+const trailingSlashRE = /\/$/
 export function isSameRoute (a: Route, b: ?Route): boolean {
   if (!b) {
     return false

test/e2e/specs/active-links.js

@@ -1,9 +1,10 @@
+
 module.exports = {
   'active links': function (browser) {
     browser
     .url('http://localhost:8080/active-links/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 10)
+      .assert.count('li a', 11)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/active-links/')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/active-links/')
@@ -12,9 +13,10 @@ module.exports = {
       .assert.attributeContains('li:nth-child(5) a', 'href', '/active-links/users/evan')
       .assert.attributeContains('li:nth-child(6) a', 'href', '/active-links/users/evan#foo')
       .assert.attributeContains('li:nth-child(7) a', 'href', '/active-links/users/evan?foo=bar')
-      .assert.attributeContains('li:nth-child(8) a', 'href', '/active-links/users/evan?baz=qux&foo=bar')
-      .assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/about')
+      .assert.attributeContains('li:nth-child(8) a', 'href', '/active-links/users/evan?foo=bar')
+      .assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/users/evan?baz=qux&foo=bar')
       .assert.attributeContains('li:nth-child(10) a', 'href', '/active-links/about')
+      .assert.attributeContains('li:nth-child(11) a', 'href', '/active-links/about')
       .assert.containsText('.view', 'Home')
 
     assertActiveLinks(1, [1, 2])
@@ -23,10 +25,11 @@ module.exports = {
     assertActiveLinks(4, [1, 3, 4])
     assertActiveLinks(5, [1, 3, 5])
     assertActiveLinks(6, [1, 3, 5, 6])
-    assertActiveLinks(7, [1, 3, 5, 7])
+    assertActiveLinks(7, [1, 3, 5, 7, 8])
     assertActiveLinks(8, [1, 3, 5, 7, 8])
-    assertActiveLinks(9, [1, 9], [10])
-    assertActiveLinks(10, [1, 9], [10])
+    assertActiveLinks(9, [1, 3, 5, 7, 9])
+    assertActiveLinks(10, [1, 10], [11])
+    assertActiveLinks(11, [1, 10], [11])
 
     browser.end()