feat(link): exact-path prop

Close #2040
vuejs · Jan 25, 2021 · 825328e · 825328e
1 parent 97d998f
commit 825328e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/examples/active-links/app.js b/examples/active-links/app.js
@@ -108,6 +108,10 @@ new Vue({
         <li><router-link :to="{ name: 'redirect-gallery' }">/redirect-gallery named (redirect to /gallery)</router-link></li>
         <li><router-link to="/redirect-image">/redirect-image (redirect to /gallery/image1)</router-link></li>
         <li><router-link :to="{ name: 'redirect-image' }" >/redirect-image named (redirect to /gallery/image1)</router-link></li>
+
+        <li><router-link to="/users?one" exact-path>/users?one</router-link></li>
+        <li><router-link to="/users?two" exact-path>/users?two</router-link></li>
+        <li><router-link to="/users/nested?two" exact-path>/users/nested?two</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

diff --git a/src/components/link.js b/src/components/link.js
@@ -28,6 +28,7 @@ export default {
     },
     custom: Boolean,
     exact: Boolean,
+    exactPath: Boolean,
     append: Boolean,
     replace: Boolean,
     activeClass: String,
@@ -71,8 +72,8 @@ export default {
       ? createRoute(null, normalizeLocation(route.redirectedFrom), null, router)
       : route
 
-    classes[exactActiveClass] = isSameRoute(current, compareTarget)
-    classes[activeClass] = this.exact
+    classes[exactActiveClass] = isSameRoute(current, compareTarget, this.exactPath)
+    classes[activeClass] = this.exact || this.exactPath
       ? classes[exactActiveClass]
       : isIncludedRoute(current, compareTarget)
 

diff --git a/src/util/route.js b/src/util/route.js
@@ -70,23 +70,26 @@ function getFullPath (
   return (path || '/') + stringify(query) + hash
 }
 
-export function isSameRoute (a: Route, b: ?Route): boolean {
+export function isSameRoute (a: Route, b: ?Route, onlyPath: ?boolean): boolean {
   if (b === START) {
     return a === b
   } else if (!b) {
     return false
   } else if (a.path && b.path) {
-    return (
-      a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
+    const isSamePath = a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '')
+    return onlyPath ? isSamePath : (
+      isSamePath &&
       a.hash === b.hash &&
       isObjectEqual(a.query, b.query)
     )
   } else if (a.name && b.name) {
     return (
       a.name === b.name &&
-      a.hash === b.hash &&
+      (onlyPath || (
+        a.hash === b.hash &&
       isObjectEqual(a.query, b.query) &&
-      isObjectEqual(a.params, b.params)
+      isObjectEqual(a.params, b.params))
+      )
     )
   } else {
     return false

diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js
@@ -10,7 +10,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/active-links/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 19)
+      .assert.count('li a', 22)
       // 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/')
@@ -57,6 +57,11 @@ module.exports = {
     assertActiveLinks(18, [1, 12, 13, 15], null, [15])
     assertActiveLinks(19, [1, 12, 13, 15], null, [15])
 
+    // exact-path
+    assertActiveLinks(20, [20, 21], null, [20, 21])
+    assertActiveLinks(21, [20, 21], null, [20, 21])
+    assertActiveLinks(22, [22], null, [22])
+
     browser.end()
 
     function assertActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) {