nuxt 路由更改查询无限循环答案

【问题标题】：nuxt route change query endless loopnuxt 路由更改查询无限循环
【发布时间】：2022-08-17 20:29:32
【问题描述】：

我有一个 nuxt 单页机网站，我正在尝试为语言切换器设置一个路由器。我的无头 CMS (Storyblok) 使用 ?language=xyz 进行语言逻辑设置。

通过 pages/index.vue 中的 AsyncData() 钩子获取数据。

现在，当我将路线从 \'/\' 更改为 \'/xyz\' 时，再次调用 AsyncData() 并更改路线。

当我不更改路径而只更改查询 (language=xyz) 时，不会发生这种情况。

我尝试添加以下内容：

beforeRouteUpdate (to, from, next) {
    console.log(\'BEFORE UPDATE\', to.query.language);
    console.log(\'BEFORE UPDATE 2\', this.$route.query.language);

    if(to.query.language != this.$route.query.language) {
      //this.$router.push({ path: \'/\', query: { language: to.query.language } })
      next();
    }
  }

当我现在单击导航时，我可以在控制台日志中看到当前语言和新语言，但仍然没有任何反应。

当我尝试推送路由（上面注释掉的代码）时，我得到一个无限循环，并看到 beforeRouteUpdate 一次又一次地运行，但 AsyncData 没有运行。

我该怎么办，所以行为与路由路径更改时的行为相同？

标签： vue.js nuxt.js vue-router asyncdata

【解决方案1】：

您确定您实际上是从 storyblok 再次获取它吗？您是使用 storyblok 模块获取它还是直接从 API 手动获取它？

作为计数器选项，我建议添加 nuxt i18n 模块并使用 i18n 语言从 storyblok 获取数据并使用 i18n 语言切换功能！这样，您还可以添加不适合故事块结构的翻译。

【讨论】：