feat(b-link): support exact-path and exact-path-active-class props for router link (fixes #6434) (#6811)

CrazyOrr · web-flow · commit 576e67b3af43 · 2021-12-15T17:43:58.000+02:00
diff --git a/docs/common-props.json b/docs/common-props.json
@@ -74,6 +74,12 @@
   "exactActiveClass": {
     "description": "<router-link> prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'"
   },
+  "exactPath": {
+    "description": "<router-link> prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections"
+  },
+  "exactPathActiveClass": {
+    "description": "<router-link> prop: Configure the active CSS class applied when the link is active with exact path match. Typically you will want to set this to class name 'active'"
+  },
   "fade": {
     "description": "When set to `true`, enables the fade animation/transition on the component"
   },
diff --git a/docs/markdown/reference/router-links/README.md b/docs/markdown/reference/router-links/README.md
@@ -149,6 +149,34 @@ With components that support router links (have a `to` prop), you will want to s
 `'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
 styling on the component when the current route matches the `to` prop.
 
+### `exact-path`
+
+- type: `boolean`
+- default: `false`
+- availability: Vue Router 3.5.0+
+
+Allows matching only using the `path` section of the url, effectively ignoring the `query` and the
+`hash` sections.
+
+```html
+<!-- this link will also be active at `/search?page=2` or `/search#filters` -->
+<router-link to="/search" exact-path> </router-link>
+```
+
+### `exact-path-active-class`
+
+- type: `string`
+- default: `'router-link-exact-path-active'`
+- availability: Vue Router 3.5.0+
+
+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.
+
+With components that support router links (have a `to` prop), you will want to set this to the class
+`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
+styling on the component when the current route matches the `to` prop.
+
 ## Nuxt.js specific router link props
 
 When BootstrapVue detects that your app is running under [Nuxt.js](https://nuxtjs.org), it will
diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -32,6 +32,8 @@ export const routerLinkProps = {
   event: makeProp(PROP_TYPE_ARRAY_STRING),
   exact: makeProp(PROP_TYPE_BOOLEAN, false),
   exactActiveClass: makeProp(PROP_TYPE_STRING),
+  exactPath: makeProp(PROP_TYPE_BOOLEAN, false),
+  exactPathActiveClass: makeProp(PROP_TYPE_STRING),
   replace: makeProp(PROP_TYPE_BOOLEAN, false),
   routerTag: makeProp(PROP_TYPE_STRING),
   to: makeProp(PROP_TYPE_OBJECT_STRING)
