diff --git a/docs/common-props.json b/docs/common-props.json index af8351f7327..c0c24b914ff 100644 --- a/docs/common-props.json +++ b/docs/common-props.json @@ -74,6 +74,12 @@ "exactActiveClass": { "description": " 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": " prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections" + }, + "exactPathActiveClass": { + "description": " 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 index 9e9d70e3e94..8b30bc5bbf1 100644 --- 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 + + +``` + +### `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 index 96478f61b05..4c026f5fed4 100644 --- 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)