Implements issue #2040 <router-link .. exact-path />

docs/en/api/options.md

@@ -67,6 +67,16 @@
 
   Globally configure `<router-link>` default active class for exact matches. Also see [router-link](router-link.md).
 
+### linkExactPathActiveClass
+
+> X.Y.Z+
+
+- type: `string`
+
+- default: `"router-link-exact-path-active"`
+
+  Globally configure `<router-link>` default active class for exact path matches. Also see [router-link](router-link.md).
+
 ### scrollBehavior
 
 - type: `Function`

docs/en/api/router-link.md

@@ -105,6 +105,16 @@
 
   Check out more examples explaining active link class [live](https://jsfiddle.net/8xrk1n9f/).
 
+- **exact-path**
+
+  > X.Y.Z+
+
+  - type: `boolean`
+
+  - default: `false`
+
+  Same as `exact` matching, but ignores query string parameters.
+
 - **event**
 
   > 2.1.0+
@@ -125,6 +135,16 @@
 
   Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option.
 
+- **exact-path-active-class**
+
+  > X.Y.Z+
+
+  - type: `string`
+
+  - default: `"router-link-exact-path-active"`
+
+  Configure the active CSS class applied when the link is active with exact path match. Note the default value can also be configured globally via the `linkExactPathActiveClass` router constructor option.
+
 ### Applying Active Class to Outer Element
 
 Sometimes we may want the active class to be applied to an outer element rather than the `<a>` tag itself, in that case, you can render that outer element using `<router-link>` and wrap the raw `<a>` tag inside:

examples/active-links/app.js

@@ -66,6 +66,8 @@ new Vue({
         <router-link tag="li" to="/about">
           <a>/about (active class on outer element)</a>
         </router-link>
+
+        <li><router-link to="/?foo=bar" exact-path>/?foo=bar (exact path match)</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/components/link.js

@@ -19,10 +19,12 @@ export default {
       default: 'a'
     },
     exact: Boolean,
+    exactPath: Boolean,
     append: Boolean,
     replace: Boolean,
     activeClass: String,
     exactActiveClass: String,
+    exactPathActiveClass: String,
     event: {
       type: eventTypes,
       default: 'click'
@@ -36,19 +38,26 @@ export default {
     const classes = {}
     const globalActiveClass = router.options.linkActiveClass
     const globalExactActiveClass = router.options.linkExactActiveClass
+    const globalExactPathActiveClass = router.options.linkExactPathActiveClass
     // Support global empty active class
     const activeClassFallback = globalActiveClass == null
             ? 'router-link-active'
             : globalActiveClass
     const exactActiveClassFallback = globalExactActiveClass == null
             ? 'router-link-exact-active'
             : globalExactActiveClass
+    const exactPathActiveClassFallback = globalExactPathActiveClass == null
+            ? 'router-link-exact-path-active'
+            : globalExactPathActiveClass
     const activeClass = this.activeClass == null
             ? activeClassFallback
             : this.activeClass
     const exactActiveClass = this.exactActiveClass == null
             ? exactActiveClassFallback
             : this.exactActiveClass
+    const exactPathActiveClass = this.exactPathActiveClass == null
+            ? exactPathActiveClassFallback
+            : this.exactPathActiveClass
     const compareTarget = location.path
       ? createRoute(null, location, null, router)
       : route
@@ -58,6 +67,10 @@ export default {
       ? classes[exactActiveClass]
       : isIncludedRoute(current, compareTarget)
 
+    if (this.exactPath) {
+      classes[exactPathActiveClass] = isSameRoute(current, compareTarget, true)
+    }
+
     const handler = e => {
       if (guardEvent(e)) {
         if (this.replace) {

src/util/route.js

@@ -70,7 +70,7 @@ function getFullPath (
   return (path || '/') + stringify(query) + hash
 }
 
-export function isSameRoute (a: Route, b: ?Route): boolean {
+export function isSameRoute (a: Route, b: ?Route, ignoringQuery: boolean): boolean {
   if (b === START) {
     return a === b
   } else if (!b) {
@@ -79,13 +79,13 @@ export function isSameRoute (a: Route, b: ?Route): boolean {
     return (
       a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
       a.hash === b.hash &&
-      isObjectEqual(a.query, b.query)
+      (ignoringQuery || (!ignoringQuery && isObjectEqual(a.query, b.query)))
     )
   } else if (a.name && b.name) {
     return (
       a.name === b.name &&
       a.hash === b.hash &&
-      isObjectEqual(a.query, b.query) &&
+      (ignoringQuery || (!ignoringQuery && isObjectEqual(a.query, b.query))) &&
       isObjectEqual(a.params, b.params)
     )
   } else {

test/e2e/specs/active-links.js

@@ -4,7 +4,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/active-links/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 11)
+      .assert.count('li a', 12)
       // 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/')
@@ -17,6 +17,7 @@ module.exports = {
       .assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/users/evan?foo=bar&baz=qux')
       .assert.attributeContains('li:nth-child(10) a', 'href', '/active-links/about')
       .assert.attributeContains('li:nth-child(11) a', 'href', '/active-links/about')
+      .assert.attributeContains('li:nth-child(12) a', 'href', '/active-links/?foo=bar')
       .assert.containsText('.view', 'Home')
 
     assertActiveLinks(1, [1, 2], null, [1, 2])
@@ -30,10 +31,11 @@ module.exports = {
     assertActiveLinks(9, [1, 3, 5, 7, 9], null, [9])
     assertActiveLinks(10, [1, 10], [11], [10], [11])
     assertActiveLinks(11, [1, 10], [11], [10], [11])
+    assertActiveLinks(12, [], [], [], [], [12])
 
     browser.end()
 
-    function assertActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) {
+    function assertActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI, exactPathActiveA) {
       browser.click(`li:nth-child(${n}) a`)
       activeA.forEach(i => {
         browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active')
@@ -49,6 +51,10 @@ module.exports = {
         browser.assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-exact-active')
           .assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active')
       })
+      exactPathActiveA && exactPathActiveA.forEach(i => {
+        browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-exact-path-active')
+          .assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active')
+      })
     }
   }
 }

test/unit/specs/route.spec.js

@@ -66,6 +66,34 @@ describe('Route utils', () => {
       expect(isSameRoute(a, b)).toBe(true)
       expect(isSameRoute(a, c)).toBe(false)
     })
+
+    it('can ignore query', () => {
+      const a = {
+        path: '/abc',
+        query: {}
+      }
+      const b = {
+        path: '/abc',
+        query: { foo: 'bar' }
+      }
+      const c = {
+        path: '/abc',
+        query: { foo: 'baz' }
+      }
+      const d = {
+        path: '/xyz',
+        query: { foo: 'bar' }
+      }
+      expect(isSameRoute(a, b)).toBe(false)
+      expect(isSameRoute(a, c)).toBe(false)
+      expect(isSameRoute(a, d)).toBe(false)
+      expect(isSameRoute(a, b, true)).toBe(true)
+      expect(isSameRoute(a, c, true)).toBe(true)
+      expect(isSameRoute(a, d, true)).toBe(false)
+      expect(isSameRoute(b, c)).toBe(false)
+      expect(isSameRoute(b, c, true)).toBe(true)
+      expect(isSameRoute(b, d, true)).toBe(false)
+    })
   })
 
   describe('isIncludedRoute', () => {