推送路由（从 vueJS 迁移到 nuxtJS）

Question

我正在将 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 中不起作用。发出警报（'嗨）;在 submitSearch 中触发正常，但我从未被重定向到路由。

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

编辑：

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

我才发现这是因为多语种路线有不同的名字。

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

Answer 1

我最后的做法是：

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

Answer 2

不是直接的答案，但在使用散列法时我发现它很管用。以后有什么问题会回来编辑的

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

Answer 3

Nuxt v2.14.12 遇到了同样的问题。经过一些挖掘后发现 this.$nuxt.$options.router 下的 router 对象是一个 Nuxt Helper。目前 this.$nuxt.$options.router.push() 工作正常。

Answer 4

这就是在 Nuxt3 中使用 Composition API

可以完成的方法

<script setup>
const router = useRouter()
const moveToIndex = () => router.push({ name: 'about' })
</script>

<template>
  <button @click="moveToIndex">move to about page</button>
</template>

选项 API 仍然以完全相同的方式工作。

推送路由（从 vueJS 迁移到 nuxtJS）

Push a route (Moving from vueJS to nuxtJS)

vue.js

nuxt.js

vue-i18n

nuxt-i18n