From 3be5b24781361a01a1f22d9facea3e32328b33a3 Mon Sep 17 00:00:00 2001 From: CrazyOrr Date: Thu, 14 Oct 2021 16:59:09 +0800 Subject: [PATCH 1/2] feat(b-link): support `exact-path` and `exact-path-active-class` props for router link --- src/components/link/link.js | 2 ++ 1 file changed, 2 insertions(+) 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) From 17d9740af94f2a10c239b6e957e982f129395233 Mon Sep 17 00:00:00 2001 From: CrazyOrr Date: Thu, 14 Oct 2021 17:36:40 +0800 Subject: [PATCH 2/2] doc(b-link): support `exact-path` and `exact-path-active-class` props for router link --- docs/common-props.json | 6 ++++ .../markdown/reference/router-links/README.md | 28 +++++++++++++++++++ 2 files changed, 34 insertions(+) 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 pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy