refactor: use relative path to do active link check

src/client/theme-default/components/SideBarLink.ts

@@ -18,7 +18,7 @@ export const SideBarLink: FunctionalComponent<{
   const text = props.item.text
   const link = resolveLink(site.value.base, props.item.link)
   const children = (props.item as DefaultTheme.SideBarGroup).children
-  const active = isActive(route, link)
+  const active = isActive(route, props.item.link)
   const childItems = createChildren(active, children, headers)
 
   return h('li', { class: 'sidebar-link' }, [

src/client/theme-default/composables/navLink.ts

@@ -11,7 +11,7 @@ export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
   const isExternal = isExternalCheck(item.value.link)
 
   const props = computed(() => {
-    const routePath = normalizePath(route.path)
+    const routePath = normalizePath(`/${route.data.relativePath}`)
 
     let active = false
     if (item.value.activeMatch) {

src/client/theme-default/utils.ts

@@ -22,7 +22,7 @@ export function isActive(route: Route, path?: string): boolean {
     return false
   }
 
-  const routePath = normalize(route.path)
+  const routePath = normalize(`/${route.data.relativePath}`)
   const pagePath = normalize(path)
 
   return routePath === pagePath

src/node/build/render.ts

@@ -20,21 +20,8 @@ export async function renderPage(
   const { app, router } = createApp()
   const routePath = `/${page.replace(/\.md$/, '')}`
   const siteData = resolveSiteDataByRoute(config.site, routePath)
-
   router.go(routePath)
 
-  // inject `base` path to the route path.
-  //
-  // when a page is rendered on the browser, `route.path` will contain the
-  // `base` path because that is the url users are actually on. however, when
-  // rendering the app here, it doesn't contain the `base` path, as you can
-  // see on the above `router.go` call.
-  //
-  // this causes hydration mismatch because app uses `route.path`, for example,
-  // to do active link check in the navbar. therefore, we inject `base` path
-  // here to make sure the rendering result is consistent.
-  router.route.path = `${siteData.base}${router.route.path}`.replace('//', '/')
-
   // lazy require server-renderer for production build
   const content = await require('@vue/server-renderer').renderToString(app)