使用useRoute获取页面路径，为什么刷新后route.path 一直是 '/' ？

Question

// index.ts
router.beforeEach(async to => {
  const localeStore = useLocaleStore()
  await localeStore.fetchLocales() // 调用store里面的方法
})

export const useLocaleStore = defineStore('locale', () => {
  const route = useRoute()

  const locale = ref<Locale>()

  const locales = ref<Locale[]>()

  watch(locale, () => {
    // 输出点开对象，可以看到值
    console.log(route)
    // 只要刷新页面，route.path 一直是 / ，但url路径是http:localhost:3000/sign-in
    fetchLocale(route.path)
  })

  const fetchLocales = () => { // 在router.beforeEach中触发
    return searchLocales().then(({ data }) => {
      locales.value = data
      locale.value = data[0] // 触发watch
    })
  }

  return { locale, locales, fetchLocale, fetchLocales }
})

试过useRouter或者直接引入router,但是刷新页面，获得的一直是 / 首页的路径

Answer 1

beforeEach 中没有执行 next() 函数吧