From 5eb948922761e9cc96674a7d43a075ecf59ef5ea Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 16 Feb 2023 10:14:39 +0800
Subject: [PATCH] fix(client): avoid updating routeLocale on route hash change
 (#1253)

Co-authored-by: Xinyu Liu <meteor.lxy@foxmail.com>
---
 packages/client/src/setupGlobalComputed.ts | 14 +++++++++-----
 packages/client/src/setupUpdateHead.ts     |  8 +-------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts
index 078b0ec0b2..2041cb8261 100644
--- a/packages/client/src/setupGlobalComputed.ts
+++ b/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)
diff --git a/packages/client/src/setupUpdateHead.ts b/packages/client/src/setupUpdateHead.ts
index dad13d6e13..f64d35d829 100644
--- a/packages/client/src/setupUpdateHead.ts
+++ b/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()
     )
   })