🌐 AI搜索 & 代理 主页
Skip to content

Commit daea0e5

Browse files
jacobmllr95jacobmllr95
authored
fix(b-link): href handling inconsistencies to <router-link> (closes #5820) (#5876)
* fix(b-link): `href` handling inconsistencies to `<router-link>` * Update regex.js * Update link.js * Update link.js
1 parent adab3c2 commit daea0e5

File tree

5 files changed

+72
-86
lines changed

5 files changed

+72
-86
lines changed

‎src/components/link/link.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NAME_LINK } from '../../constants/components'
22
import Vue from '../../utils/vue'
33
import { concat } from '../../utils/array'
44
import { getComponentConfig } from '../../utils/config'
5-
import { attemptBlur, attemptFocus } from '../../utils/dom'
5+
import { attemptBlur, attemptFocus, isTag } from '../../utils/dom'
66
import { stopEvent } from '../../utils/events'
77
import { isBoolean, isEvent, isFunction, isUndefined } from '../../utils/inspect'
88
import { pluckProps } from '../../utils/props'
@@ -120,14 +120,16 @@ export const BLink = /*#__PURE__*/ Vue.extend({
120120
},
121121
computedRel() {
122122
// We don't pass `this` as the first arg as we need reactivity of the props
123-
return computeRel({ target: this.target, rel: this.rel })
123+
const { target, rel } = this
124+
return computeRel({ target, rel })
124125
},
125126
computedHref() {
126127
// We don't pass `this` as the first arg as we need reactivity of the props
127-
return computeHref({ to: this.to, href: this.href }, this.computedTag)
128+
const { to, href } = this
129+
return computeHref({ to, href })
128130
},
129131
computedProps() {
130-
const prefetch = this.prefetch
132+
const { prefetch } = this
131133
return this.isRouterLink
132134
? {
133135
...pluckProps({ ...routerLinkProps, ...nuxtLinkProps }, this),
@@ -153,10 +155,10 @@ export const BLink = /*#__PURE__*/ Vue.extend({
153155
...bvAttrs,
154156
// If `href` attribute exists on `<router-link>` (even `undefined` or `null`)
155157
// it fails working on SSR, so we explicitly add it here if needed
156-
// (i.e. if `computedHref()` is truthy)
158+
// (i.e. if `computedHref` is truthy)
157159
...(href ? { href } : {}),
158160
// We don't render `rel` or `target` on non link tags when using `vue-router`
159-
...(isRouterLink && routerTag !== 'a' && routerTag !== 'area' ? {} : { rel, target }),
161+
...(isRouterLink && !isTag(routerTag, 'a') ? {} : { rel, target }),
160162
tabindex: disabled ? '-1' : isUndefined(bvAttrs.tabindex) ? null : bvAttrs.tabindex,
161163
'aria-disabled': disabled ? 'true' : null
162164
}

‎src/components/pagination-nav/pagination-nav.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ export const BPaginationNav = /*#__PURE__*/ Vue.extend({
213213
try {
214214
// Convert the `to` to a HREF via a temporary `a` tag
215215
link = document.createElement('a')
216-
link.href = computeHref({ to }, 'a', '/', '/')
216+
link.href = computeHref({ to }, '/', '/')
217217
// We need to add the anchor to the document to make sure the
218218
// `pathname` is correctly detected in any browser (i.e. IE)
219219
document.body.appendChild(link)

‎src/constants/regex.js‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,4 @@
1-
// Loose YYYY-MM-DD matching, ignores any appended time inforation
2-
// Matches '1999-12-20', '1999-1-1', '1999-01-20T22:51:49.118Z', '1999-01-02 13:00:00'
3-
export const RX_DATE = /^\d+-\d\d?-\d\d?(?:\s|T|$)/
4-
5-
// Used to split off the date parts of the YYYY-MM-DD string
6-
export const RX_DATE_SPLIT = /-|\s|T/
7-
8-
// Time string RegEx (optional seconds)
9-
export const RX_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/
10-
11-
// HREFs must end with a hash followed by at least one non-hash character
12-
export const RX_HREF = /^.*(#[^#]+)$/
1+
// --- General ---
132

143
export const RX_ARRAY_NOTATION = /\[(\d+)]/g
154
export const RX_DIGITS = /^\d+$/
@@ -20,6 +9,7 @@ export const RX_HTML_TAGS = /(<([^>]+)>)/gi
209
export const RX_HYPHENATE = /\B([A-Z])/g
2110
export const RX_LOWER_UPPER = /([a-z])([A-Z])/g
2211
export const RX_NUMBER = /^[0-9]*\.?[0-9]+$/
12+
export const RX_PLUS = /\+/g
2313
export const RX_REGEXP_REPLACE = /[-/\\^$*+?.()|[\]{}]/g
2414
export const RX_SPACES = /[\s\uFEFF\xA0]+/g
2515
export const RX_SPACE_SPLIT = /\s+/
@@ -30,15 +20,40 @@ export const RX_TRIM_RIGHT = /\s+$/
3020
export const RX_UNDERSCORE = /_/g
3121
export const RX_UN_KEBAB = /-(\w)/g
3222

33-
// Aspect
23+
// --- Date ---
24+
25+
// Loose YYYY-MM-DD matching, ignores any appended time inforation
26+
// Matches '1999-12-20', '1999-1-1', '1999-01-20T22:51:49.118Z', '1999-01-02 13:00:00'
27+
export const RX_DATE = /^\d+-\d\d?-\d\d?(?:\s|T|$)/
28+
29+
// Used to split off the date parts of the YYYY-MM-DD string
30+
export const RX_DATE_SPLIT = /-|\s|T/
31+
32+
// Time string RegEx (optional seconds)
33+
export const RX_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/
34+
35+
// --- URL ---
36+
37+
// HREFs must end with a hash followed by at least one non-hash character
38+
export const RX_HREF = /^.*(#[^#]+)$/
39+
40+
export const RX_ENCODED_COMMA = /%2C/g
41+
export const RX_ENCODE_REVERSE = /[!'()*]/g
42+
export const RX_QUERY_START = /^(\?|#|&)/
43+
44+
// --- Aspect ---
45+
3446
export const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
3547
export const RX_ASPECT_SEPARATOR = /[/:]/
3648

37-
// Grid
49+
// --- Grid ---
50+
3851
export const RX_COL_CLASS = /^col-/
3952

40-
// Icon
53+
// --- Icon ---
54+
4155
export const RX_ICON_PREFIX = /^BIcon/
4256

43-
// Locale
57+
// --- Locale ---
58+
4459
export const RX_STRIP_LOCALE_MODS = /-u-.+/

‎src/utils/router.js‎

Lines changed: 23 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1+
import { RX_ENCODED_COMMA, RX_ENCODE_REVERSE, RX_PLUS, RX_QUERY_START } from '../constants/regex'
12
import { isTag } from './dom'
23
import { isArray, isNull, isPlainObject, isString, isUndefined } from './inspect'
34
import { keys } from './object'
45
import { toString } from './string'
56

6-
const ANCHOR_TAG = 'a'
7-
8-
// Precompile RegExp
9-
const commaRE = /%2C/g
10-
const encodeReserveRE = /[!'()*]/g
11-
const plusRE = /\+/g
12-
const queryStartRE = /^(\?|#|&)/
13-
147
// Method to replace reserved chars
158
const encodeReserveReplacer = c => '%' + c.charCodeAt(0).toString(16)
169

@@ -19,8 +12,8 @@ const encodeReserveReplacer = c => '%' + c.charCodeAt(0).toString(16)
1912
// - preserve commas
2013
const encode = str =>
2114
encodeURIComponent(toString(str))
22-
.replace(encodeReserveRE, encodeReserveReplacer)
23-
.replace(commaRE, ',')
15+
.replace(RX_ENCODE_REVERSE, encodeReserveReplacer)
16+
.replace(RX_ENCODED_COMMA, ',')
2417

2518
const decode = decodeURIComponent
2619

@@ -65,14 +58,14 @@ export const parseQuery = query => {
6558
const parsed = {}
6659
query = toString(query)
6760
.trim()
68-
.replace(queryStartRE, '')
61+
.replace(RX_QUERY_START, '')
6962

7063
if (!query) {
7164
return parsed
7265
}
7366

7467
query.split('&').forEach(param => {
75-
const parts = param.replace(plusRE, ' ').split('=')
68+
const parts = param.replace(RX_PLUS, ' ').split('=')
7669
const key = decode(parts.shift())
7770
const val = parts.length > 0 ? decode(parts.join('=')) : null
7871

@@ -90,12 +83,12 @@ export const parseQuery = query => {
9083

9184
export const isLink = props => !!(props.href || props.to)
9285

93-
export const isRouterLink = tag => !isTag(tag, ANCHOR_TAG)
86+
export const isRouterLink = tag => !!(tag && !isTag(tag, 'a'))
9487

9588
export const computeTag = ({ to, disabled, routerComponentName } = {}, thisOrParent) => {
96-
const hasRouter = thisOrParent.$router
97-
if (!hasRouter || (hasRouter && disabled) || (hasRouter && !to)) {
98-
return ANCHOR_TAG
89+
const hasRouter = !!thisOrParent.$router
90+
if (!hasRouter || (hasRouter && (disabled || !to))) {
91+
return 'a'
9992
}
10093

10194
// TODO:
@@ -109,45 +102,26 @@ export const computeTag = ({ to, disabled, routerComponentName } = {}, thisOrPar
109102
return routerComponentName || (thisOrParent.$nuxt ? 'nuxt-link' : 'router-link')
110103
}
111104

112-
export const computeRel = ({ target, rel } = {}) => {
113-
if (target === '_blank' && isNull(rel)) {
114-
return 'noopener'
115-
}
116-
return rel || null
117-
}
118-
119-
export const computeHref = (
120-
{ href, to } = {},
121-
tag = ANCHOR_TAG,
122-
fallback = '#',
123-
toFallback = '/'
124-
) => {
125-
// We've already checked the $router in computeTag(), so isRouterLink() indicates a live router.
126-
// When deferring to Vue Router's router-link, don't use the href attribute at all.
127-
// We return null, and then remove href from the attributes passed to router-link
128-
if (isRouterLink(tag)) {
129-
return null
130-
}
105+
export const computeRel = ({ target, rel } = {}) =>
106+
target === '_blank' && isNull(rel) ? 'noopener' : rel || null
131107

108+
export const computeHref = ({ href, to } = {}, fallback = '#', toFallback = '/') => {
132109
// Return `href` when explicitly provided
133110
if (href) {
134111
return href
135112
}
136113

137-
// Reconstruct `href` when `to` used, but no router
138-
if (to) {
139-
// Fallback to `to` prop (if `to` is a string)
140-
if (isString(to)) {
141-
return to || toFallback
142-
}
143-
// Fallback to `to.path + to.query + to.hash` prop (if `to` is an object)
144-
if (isPlainObject(to) && (to.path || to.query || to.hash)) {
145-
const path = toString(to.path)
146-
const query = stringifyQueryObj(to.query)
147-
let hash = toString(to.hash)
148-
hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`
149-
return `${path}${query}${hash}` || toFallback
150-
}
114+
// Fallback to `to` prop (if `to` is a string)
115+
if (isString(to)) {
116+
return to || toFallback
117+
}
118+
// Fallback to `to.path' + `to.query` + `to.hash` prop (if `to` is an object)
119+
if (isPlainObject(to) && (to.path || to.query || to.hash)) {
120+
const path = toString(to.path)
121+
const query = stringifyQueryObj(to.query)
122+
let hash = toString(to.hash)
123+
hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`
124+
return `${path}${query}${hash}` || toFallback
151125
}
152126

153127
// If nothing is provided return the fallback

‎src/utils/router.spec.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -110,14 +110,8 @@ describe('utils/router', () => {
110110

111111
it('parses nothing to default', async () => {
112112
expect(computeHref()).toEqual('#')
113-
expect(computeHref(undefined, undefined, '/', '')).toEqual('/')
114-
expect(computeHref(undefined, undefined, '', '')).toEqual('')
115-
})
116-
117-
it('returns null when tag is not `a`', async () => {
118-
expect(computeHref({}, 'div')).toEqual(null)
119-
expect(computeHref(undefined, 'div', '/', '')).toEqual(null)
120-
expect(computeHref(undefined, 'span', '', '/')).toEqual(null)
113+
expect(computeHref(undefined, '/', '')).toEqual('/')
114+
expect(computeHref(undefined, '', '')).toEqual('')
121115
})
122116

123117
it('returns href when both href and to provided', async () => {
@@ -130,8 +124,8 @@ describe('utils/router', () => {
130124

131125
it('parses empty `href` to default', async () => {
132126
expect(computeHref({ href: '' })).toEqual('#')
133-
expect(computeHref({ href: '' }, 'a', '/', '')).toEqual('/')
134-
expect(computeHref({ href: '' }, 'a', '', '')).toEqual('')
127+
expect(computeHref({ href: '' }, '/', '')).toEqual('/')
128+
expect(computeHref({ href: '' }, '', '')).toEqual('')
135129
})
136130

137131
it('parses `to` when string', async () => {
@@ -179,8 +173,8 @@ describe('utils/router', () => {
179173

180174
it('parses empty `to` to fallback default', async () => {
181175
expect(computeHref({ to: {} })).toEqual('#')
182-
expect(computeHref({ to: {} }, 'a', '#', '')).toEqual('#')
183-
expect(computeHref({ to: {} }, 'a', '/', '#')).toEqual('/')
176+
expect(computeHref({ to: {} }, '#', '')).toEqual('#')
177+
expect(computeHref({ to: {} }, '/', '#')).toEqual('/')
184178
})
185179

186180
it('parses complete `to`', async () => {
@@ -204,8 +198,9 @@ describe('utils/router', () => {
204198
describe('isRouterLink()', () => {
205199
it('works', async () => {
206200
expect(isRouterLink('a')).toBe(false)
207-
expect(isRouterLink('div')).toBe(true)
208-
expect(isRouterLink()).toBe(true)
201+
expect(isRouterLink('router-link')).toBe(true)
202+
expect(isRouterLink('nuxt-link')).toBe(true)
203+
expect(isRouterLink()).toBe(false)
209204
})
210205
})
211206

0 commit comments

Comments
 (0)