2
2
<RouterLink
3
3
v-if =" isRouterLink"
4
4
class =" nav-link"
5
+ :class =" { 'router-link-active': isActiveInSubpath }"
5
6
:to =" item.link"
6
- :exact =" isExact"
7
7
:aria-label =" linkAriaLabel"
8
8
v-bind =" $attrs"
9
9
>
30
30
<script lang="ts">
31
31
import { computed , defineComponent , toRefs } from ' vue'
32
32
import type { PropType } from ' vue'
33
+ import { useRoute } from ' vue-router'
33
34
import { useSiteData } from ' @vuepress/client'
34
35
import { isLinkHttp , isLinkMailto , isLinkTel } from ' @vuepress/shared'
35
36
import type { NavLink } from ' ../types'
@@ -47,6 +48,7 @@ export default defineComponent({
47
48
},
48
49
49
50
setup(props ) {
51
+ const route = useRoute ()
50
52
const site = useSiteData ()
51
53
const { item } = toRefs (props )
52
54
@@ -72,14 +74,6 @@ export default defineComponent({
72
74
! hasNonHttpProtocal .value &&
73
75
! isBlankTarget .value
74
76
)
75
- // is the `exact` prop of `<RouterLink>` should be true
76
- const isExact = computed (() => {
77
- const localeKeys = Object .keys (site .value .locales )
78
- if (localeKeys .length ) {
79
- return localeKeys .some ((key ) => key === item .value .link )
80
- }
81
- return item .value .link === ' /'
82
- })
83
77
// resolve the `rel` attr
84
78
const linkRel = computed (() => {
85
79
if (hasNonHttpProtocal .value ) return undefined
@@ -92,9 +86,25 @@ export default defineComponent({
92
86
() => item .value .ariaLabel || item .value .text
93
87
)
94
88
89
+ // should be active when current route is a subpath of this link
90
+ const shouldBeActiveInSubpath = computed (() => {
91
+ const localeKeys = Object .keys (site .value .locales )
92
+ if (localeKeys .length ) {
93
+ return ! localeKeys .some ((key ) => key === item .value .link )
94
+ }
95
+ return item .value .link !== ' /'
96
+ })
97
+ // if this link is active in subpath
98
+ const isActiveInSubpath = computed (() => {
99
+ if (! isRouterLink .value || ! shouldBeActiveInSubpath .value ) {
100
+ return false
101
+ }
102
+ return route .path .startsWith (item .value .link )
103
+ })
104
+
95
105
return {
106
+ isActiveInSubpath ,
96
107
isBlankTarget ,
97
- isExact ,
98
108
isRouterLink ,
99
109
linkRel ,
100
110
linkTarget ,
0 commit comments