Nuxt单页站点语言切换路由异常：AsyncData不触发与循环问题

核心原因 #

Nuxt的asyncData钩子只会在页面首次加载或路由路径（path）发生变化时触发，仅修改查询参数（query）不会触发该钩子，这就是问题的根源。

方案一：抽离数据逻辑到独立方法，在beforeRouteUpdate中调用 #

把asyncData里的数据获取逻辑抽成可复用的方法，在beforeRouteUpdate钩子中检测语言参数变化时，手动调用该方法更新页面数据。

示例代码：

<template>
  <!-- 页面模板内容 -->
</template>

<script>
export default {
  async asyncData({ $storyblok, route }) {
    const data = await this.fetchPageData(route.query.language || '默认语言')
    return { pageData: data }
  },
  methods: {
    async fetchPageData(language) {
      // 这里放置原本在asyncData中的Storyblok数据请求逻辑
      const response = await this.$storyblok.get('cdn/stories/home', {
        version: 'draft',
        language: language
      })
      return response.data.story.content
    }
  },
  async beforeRouteUpdate(to, from, next) {
    if (to.query.language !== from.query.language) {
      // 调用数据获取方法并更新页面数据
      this.pageData = await this.fetchPageData(to.query.language)
    }
    next()
  }
}
</script>

方案二：监听$route.query.language的变化 #

通过Vue的watch属性监听语言查询参数的变化，一旦参数变更就重新获取数据。

示例代码：

<template>
  <!-- 页面模板内容 -->
</template>

<script>
export default {
  async asyncData({ $storyblok, route }) {
    const data = await this.fetchPageData(route.query.language || '默认语言')
    return { pageData: data }
  },
  methods: {
    async fetchPageData(language) {
      const response = await this.$storyblok.get('cdn/stories/home', {
        version: 'draft',
        language: language
      })
      return response.data.story.content
    }
  },
  watch: {
    '$route.query.language': {
      immediate: false,
      async handler(newLang) {
        this.pageData = await this.fetchPageData(newLang)
      }
    }
  }
}
</script>

原代码无效的原因 #

你之前尝试的beforeRouteUpdate中执行$router.push会陷入无限循环——每次push都会触发beforeRouteUpdate，且没有终止循环的逻辑；同时，即便push成功，由于路径始终是/，asyncData依然不会被触发。

内容的提问来源于stack exchange，提问作者Dollique