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

docs/.vitepress/config.js

@@ -23,8 +23,12 @@ module.exports = {
     },
 
     nav: [
-      { text: 'Guide', link: '/' },
+      { text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
-      { text: 'Config Reference', link: '/config/basics' },
+      {
+        text: 'Config Reference',
+        link: '/config/basics',
+        activeMatch: '^/config/'
+      },
       {
         text: 'Release Notes',
         link: 'https://github.com/vuejs/vitepress/releases'

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(
+        active,
-          normalizePath(withBase(item.link))
-        ),
         isExternal
       },
       href: isExternal ? item.link : withBase(item.link),
@@ -36,4 +47,5 @@ function normalizePath(path: string): string {
     .replace(/#.*$/, '')
     .replace(/\?.*$/, '')
     .replace(/\.(html|md)$/, '')
+    .replace(/\/index$/, '/')
 }

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 {