fix(client): avoid updating routeLocale on route hash change (#1253)

Co-authored-by: Xinyu Liu <meteor.lxy@foxmail.com>

packages/client/src/setupGlobalComputed.ts

@@ -1,4 +1,4 @@
-import { type App, computed } from 'vue'
+import { type App, computed, ref, watch } from 'vue'
 import type { Router } from 'vue-router'
 import {
   type LayoutsRef,
@@ -58,13 +58,17 @@ export const setupGlobalComputed = (
   router: Router,
   clientConfigs: ClientConfig[]
 ): GlobalComputed => {
+  // create a manual computed route path, so that route hash changes won't trigger all downstream computed
+  const routePath = ref(router.currentRoute.value.path)
+  watch(
+    () => router.currentRoute.value.path,
+    (value) => (routePath.value = value)
+  )
+
   // create global computed
   const layouts = computed(() => resolvers.resolveLayouts(clientConfigs))
   const routeLocale = computed(() =>
-    resolvers.resolveRouteLocale(
-      siteData.value.locales,
-      router.currentRoute.value.path
-    )
+    resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
   )
   const siteLocaleData = computed(() =>
     resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value)

packages/client/src/setupUpdateHead.ts

@@ -1,7 +1,6 @@
 import { isPlainObject, isString } from '@vuepress/shared'
 import type { HeadConfig, VuepressSSRContext } from '@vuepress/shared'
 import { onMounted, provide, ref, useSSRContext, watch } from 'vue'
-import { useRoute } from 'vue-router'
 import {
   updateHeadSymbol,
   usePageHead,
@@ -13,7 +12,6 @@ import type { UpdateHead } from './composables/index.js'
  * Auto update head and provide as global util
  */
 export const setupUpdateHead = (): void => {
-  const route = useRoute()
   const head = usePageHead()
   const lang = usePageLang()
 
@@ -64,11 +62,7 @@ export const setupUpdateHead = (): void => {
     loadHead()
     updateHead()
     watch(
-      // when watching `head`, route hash changes will also trigger the watcher,
-      // causing unnecessary head updates
-      // so we watch `head` in dev mode to support hot-reload of `frontmatter.head`,
-      // and watch `route.path` in production mode to avoid extra updates
-      () => (__VUEPRESS_DEV__ ? head.value : route.path),
+      () => head.value,
       () => updateHead()
     )
   })