【问题标题】:Push a route (Moving from vueJS to nuxtJS)推送路由(从 vueJS 移动到 nuxtJS)
【发布时间】:2018-10-26 18:22:32
【问题描述】:

我正在将一个 VueJS 项目转换为 Nuxt.js,但我无法理解 nuxt 如何处理路由。它的文档没有提到推送路由。

使用 VueJS 我在组件中有以下内容。

 //template
 <input class="" type="search"
        name="q" id="q" v-model="q"
        @keyup.enter="submitSearch"
 >
 //script
  methods: {
        submitSearch() {
            this.$route.push({name: 'search', query: {q: this.q}});

            //also tried the following
            //nuxt.$router.push({name: 'search', query: {q: this.q}});

        }
    }

但这在 Nuxt 中没有任何作用。发出警报('hi);在 submitSearch 内触发正常,但我从未被重定向到路线。

这里的目标是当用户在搜索栏中按下回车键时,重定向到 /search?q=blablabla

编辑:

问题是用户被重定向到/?q=blablabla而不是/search?..

我刚刚意识到这是因为多语言路线有不同的名称。

我将如何推送到动态命名为 search__en 而不是“search”的路由名称?

【问题讨论】:

  • 不还是“this.$router.push...”吗?
  • 也可以参考这个问题:github.com/nuxt/nuxt.js/issues/2737
  • 感谢@DevinFields,我更新了我的问题。
  • 可能仍然没有足够的信息。那是完整的vue文件吗?你能发布你的路由器配置吗?

标签: vue.js nuxt.js vue-i18n nuxt-i18n


【解决方案1】:

在使用 Nuxt v2.14.12 时遇到了同样的问题。经过一番挖掘,在this.$nuxt.$options.router 下找到了router 对象,这是一个 Nuxt Helper。目前this.$nuxt.$options.router.push() 工作正常。

【讨论】:

    【解决方案2】:

    不是一个直接的答案,但在使用散列时我发现这很好用。如果以后有任何问题,会回来编辑。

    this.$router.push(#${hash});

    【讨论】:

    • 这个答案在错误的地方,但你肯定帮助了我。谢谢。我还意识到堆栈溢出会转换您使用的反引号。
    【解决方案3】:

    我最终做到的方式是:

    this.$router.push({path: this.localePath('search'), query: {q: this.q}});
    

    【讨论】:

      猜你喜欢
      • 2020-09-07
      • 2020-01-31
      • 2019-12-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-26
      • 2022-07-18
      • 2020-12-03
      相关资源
      最近更新 更多