feat(theme-default): nav.item.activeMatch

vuejs · Jan 1, 2021 · e262ef6 · e262ef6
1 parent a41928e
commit e262ef6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -23,8 +23,12 @@ module.exports = {
     },
 
     nav: [
-      { text: 'Guide', link: '/' },
-      { text: 'Config Reference', link: '/config/basics' },
+      { text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
+      {
+        text: 'Config Reference',
+        link: '/config/basics',
+        activeMatch: '^/config/'
+      },
       {
         text: 'Release Notes',
         link: 'https://github.com/vuejs/vitepress/releases'

diff --git a/src/client/theme-default/composables/navLink.ts b/src/client/theme-default/composables/navLink.ts
@@ -11,11 +11,22 @@ export function useNavLink(item: DefaultTheme.NavItemWithLink) {
   const isExternal = isExternalCheck(item.link)
 
   const props = computed(() => {
+    const routePath = normalizePath(route.path)
+
+    let active = false
+    if (item.activeMatch) {
+      active = new RegExp(item.activeMatch).test(routePath)
+    } else {
+      const itemPath = normalizePath(withBase(item.link))
+      active =
+        itemPath === '/'
+          ? itemPath === routePath
+          : routePath.startsWith(itemPath)
+    }
+
     return {
       class: {
-        active: normalizePath(route.path).startsWith(
-          normalizePath(withBase(item.link))
-        ),
+        active,
         isExternal
       },
       href: isExternal ? item.link : withBase(item.link),
@@ -36,4 +47,5 @@ function normalizePath(path: string): string {
     .replace(/#.*$/, '')
     .replace(/\?.*$/, '')
     .replace(/\.(html|md)$/, '')
+    .replace(/\/index$/, '/')
 }
diff --git a/src/client/theme-default/config.ts b/src/client/theme-default/config.ts
@@ -80,6 +80,7 @@ export namespace DefaultTheme {
     target?: string
     rel?: string
     ariaLabel?: string
+    activeMatch?: string
   }
 
   export interface NavItemWithLink extends NavItemBase {