Params field is empty in $router.push

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

Example:

//route (in your router file should have "name"){ path: '/errors', name: 'EXAMPLE', component: ... }//navigatingthis.$router.push({    name: 'EXAMPLE',     params: { errors: '123' }});

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

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' }})

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 onlyparams 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.