Push a route (Moving from vueJS to nuxtJS)

Question

I am converting a VueJS project to Nuxt.js and I have a problem understanding how nuxt handles routing. Its documentation doesn't say anything about Pushing a route.

Using VueJS I have the following in a component.

 //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}});

        }
    }

But this doesn't do a thing in Nuxt. Putting an alert('hi); inside the submitSearch fires fine but I am never redirected to the route.

The goal here is when the user presses enter in the searchbar, to be redirected to /search?q=blablabla

EDIT:

The problem is that the user is redirected to /?q=blablabla instead of /search?..

I just realized that this is because there are different names for multilingual routes.

How am I going to push to a route name that instead of 'search' is named search__en dynamically?

Also refer to this issue: https://github.com/nuxt/nuxt.js/issues/2737 — Devin Fields, May 16 '18 at 16:07
there still might not be enough information. Is that the complete vue file? Can you post your router configuration? — Devin Fields, May 16 '18 at 17:08

score 37 · Accepted Answer · edited May 12 '22 at 12:25

37

The way I finally did was:

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

edited May 12 '22 at 12:25

kissu

40,416
14
65
133

answered May 16 '18 at 20:09

score 3 · Answer 2 · answered May 12 '22 at 13:23

This is how it could be done in Nuxt3, with the Composition API

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

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

The Options API is still working in the same exact way.

score 2 · Answer 3 · answered Mar 11 '21 at 20:43

2

Faced same problem with Nuxt v2.14.12. After some digging found router object under this.$nuxt.$options.router which is a Nuxt Helper. Currently this.$nuxt.$options.router.push() works fine.

answered Mar 11 '21 at 20:43

RiadSaidur

147
2
12

1

You don't need to go that deep, as shown by the other answers. – kissu May 12 '22 at 12:25

score 1 · Answer 4 · answered Aug 16 '20 at 20:01

1

Not a direct answer but while working with hashing I found this to work well. Will come back to edit this if there are any issues in the future.

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

answered Aug 16 '20 at 20:01

kyle kenney

21
2

1

This answer is in the wrong place, but you definitely helped me. Thanks. Also I realized stack overflow converts the backticks you used. – James Ikubi Nov 09 '20 at 11:39

score 0 · Answer 5 · answered Mar 01 '23 at 16:51

0

For Nuxt3:

const router = useRouter();

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

And list of useful methods:

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

answered Mar 01 '23 at 16:51

Art Mary

562
4
12

score 0 · Answer 6 · answered Jun 29 '23 at 22:49

0

use NavigateTo

  navigateTo("/reports/" + reportId);

answered Jun 29 '23 at 22:49

David 天宇 Wong

3,724
4
35
47

Push a route (Moving from vueJS to nuxtJS)

6 Answers6

Linked