Push-маршрут (переход от 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' назван search__en динамически?

Answer 1

То, как я наконец это сделал, было:

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

Answer 2

Вот как это можно сделать в 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 опций по-прежнему работает точно так же.

Answer 3

Столкнулся с такой же проблемой с Nuxt v2.14.12. После недолгих копаний нашел routerобъект под this.$nuxt.$options.routerкоторый является помощником Nuxt . В настоящее время this.$nuxt.$options.router.push()работает отлично.

Answer 4

Не прямой ответ, но при работе с хешированием я обнаружил, что это работает хорошо. Вернусь, чтобы отредактировать это, если возникнут какие-либо проблемы в будущем.

это. $router.push(#${hash});

Answer 5

Для Nuxt3:

      const router = useRouter();

router.push({ path: '/home' });
router.push({ path: 'project-list' });
router.replace({ name: 'project-list' });

И список полезных методов:

      router.back();
router.forward();
router.go();

Answer 6

используйте NavigateTo

        navigateTo("/reports/" + reportId);