Params field is empty in $router.push

Question

Consider this:

this.$root.$router.push({
    path: '/dashboard', 
    params: { errors: 'error' }, 
    query: { test: 'test' }
})

I use this in my component to redirect to another URL, and some error has occured. The problem is that when I want to access params field in dashboard component, it's empty. The query field works well. I'm trying to access it by this.$route.params.errors.

score 74 · Accepted Answer · answered Nov 18 '16 at 16:06

74

You can use params only with named paths (i think).

Example:

//route (in your router file should have "name")
{ path: '/errors', name: 'EXAMPLE', component: ... }

//navigating
this.$router.push({
    name: 'EXAMPLE', 
    params: { errors: '123' }
});

Now it will have correct value in this.$route.params.

answered Nov 18 '16 at 16:06

euvl

4,716
2
25
30

2

Do you know what's the reason for this limitation? – andresgottlieb Apr 06 '17 at 23:15
8

Tragic limitation. – zrooda Jun 01 '17 at 15:10
1

what a gotchya.... not enough to just push the route path and params in object – Akin Hwan Apr 05 '20 at 16:36
This explanation does not obey the intro in official https://router.vuejs.org/guide/essentials/named-routes.html. I think this is a bug of Vuejs – Jiancong Sep 28 '22 at 04:33
how about this.$router.currentRoute.params.id? its only work with buttong with `:to properties only` , with `this.$router.push` doesnt work. – Yogi Arif Widodo Oct 06 '22 at 04:08

score 12 · Answer 2 · answered Apr 12 '17 at 04:16

12

If you don't want to use named routes you can try this:

ES6

this.$root.$router.push({
    path: `/dashboard/${error}`, 
    query: { test }
})

ES5

this.$root.$router.push({
    path: '/dashboard/' + error, 
    query: { test: 'test' }
})

answered Apr 12 '17 at 04:16

Rob

6,758
4
46
51

Query probably might not handle objects like `props` do (not tested tho) – jean d'arme Aug 09 '19 at 10:17

score 0 · Answer 3 · answered Jun 24 '20 at 03:58

I faced the similar issue where in one of my views (component). I was trying to navigate (programmatically) from /foo/bar to /foo/bar/123, but the route param was not available later in the component. My relevant navigation code looked like below:

methods: {
  save_obj() {
    let vm = this;
    // Make AJAX call to save vm.my_obj, and on success do:
    let v = `${vm.$route.path}/${vm.my_obj.id}`;
    console.log("Loading view at path: "+v);
    vm.$router.push({ path: v });
  },
    ...
}

It would print the expected log (e.g., Loading view at path: /foo/bar/112), however, the loading of data in the created() hook would not receive the value of route param. My failing created() code looked like below:

created: function() {
      console.log("Loading object details.");
      let vm = this;
      let cid = vm.$route.params.id; // <---- This was the problem
      vm.$http.get('api/'+cid)
      .then(function (res) {
        if (res.data.status == "OK") {
          vm.my_obj = res.data.body;
        } else {
          vm.setStatusMessage(res.data.body);
        }
      })
      .catch(function (error) {
        console.log(error);
        vm.setStatusMessage("Error: "+error);
      });
}

The solution was indicated in the third note here quoted below :

Note: If the destination is the same as the current route and only params are changing (e.g. going from one profile to another /users/1 -> /users/2), you will have to use beforeRouteUpdate to react to changes (e.g. fetching the user information).

I had to do the following in my component:

Change the line let cid = vm.$route.params.id; in created() to let cid = vm.course.id

and, add the following to the component:

beforeRouteUpdate(to, from, next) {
    if (to.params.id) {
      this.my_obj.id = to.params.id;
    }
    // Some other code specific to my app
    next();
  }

I hope this helps someone stuck with the similar issue.

Abdullah Zafar · Answer 4 · 2023-01-19T06:37:02.733

If you want to send a parameter with a query parameter you can use that syntax like that

this.$router.push({
    path: this.localePath(`/bookings/${requestReservation?.attributes?.booking_id}`),
    query: { requestReservation: requestReservation }
})

You can access it on the next page like that

this.$route.query.requestReservation

If you want send it fro nuxt-link than its syntax like that

<nuxt-link 
 :to="{ path: '/bookings/'+ requestReservation.attributes.booking_id, 
 query: { requestReservation } }">
 Booking
</nuxt-link>

You can access it on the next page same like previous

this.$route.query.requestReservation

Params field is empty in $router.push

4 Answers4