diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index ed7d02fcfced..865abfcb7855 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -135,7 +135,9 @@ const showSidebar = computed(() => {
 
   const { themeConfig } = siteRouteData.value
 
-  return !isSideBarEmpty(getSideBarConfig(themeConfig.sidebar, route.path))
+  return !isSideBarEmpty(
+    getSideBarConfig(themeConfig.sidebar, route.data.relativePath)
+  )
 })
 
 const toggleSidebar = (to?: boolean) => {
diff --git a/src/client/theme-default/components/SideBarLink.ts b/src/client/theme-default/components/SideBarLink.ts
index a0c987c4ec57..b5b903b38aab 100644
--- a/src/client/theme-default/components/SideBarLink.ts
+++ b/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' }, [
diff --git a/src/client/theme-default/composables/navLink.ts b/src/client/theme-default/composables/navLink.ts
index d35f9b64ed57..c726b9313039 100644
--- a/src/client/theme-default/composables/navLink.ts
+++ b/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) {
diff --git a/src/client/theme-default/composables/sideBar.ts b/src/client/theme-default/composables/sideBar.ts
index e9b53feb2c92..2dc723aee82a 100644
--- a/src/client/theme-default/composables/sideBar.ts
+++ b/src/client/theme-default/composables/sideBar.ts
@@ -30,7 +30,7 @@ export function useSideBar() {
     // now, there's no sidebar setting at frontmatter; let's see the configs
     const themeSidebar = getSideBarConfig(
       site.value.themeConfig.sidebar,
-      route.path
+      route.data.relativePath
     )
 
     if (themeSidebar === false) {
diff --git a/src/client/theme-default/utils.ts b/src/client/theme-default/utils.ts
index f86d7d4f2874..4c6f88de7904 100644
--- a/src/client/theme-default/utils.ts
+++ b/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