Vue Router this.$router.push not working on methods

问题

i'm doing login, but after the login methods gets success, i'm pushing a route for the $router object and it's not working, can someone help me?

my code:

doLogin(){
       this.attemptLogin({...this.user}).then(function(){
            this.$router.push('/') 
            } )
  },

So, the login methods execute as expected, but the callback this.$router.push('/') does not runs

my attemptLogin is an action, it's code is following:

export const attemptLogin = ( {commit}, user) => {
    return http.post('login', {
        'email': user.email,
        'password': user.password
    }).then(response => {
        return commit(types.setToken, response.data)
    }).catch( e => console.log(e))
}

回答1:

Solved, i changed the method this.$router.push() from my code, to this.$router.go('/').

Thanks for everyone in comments.

回答2:

You have to push to a name or path Try this:

this.$router.push({ path: '/' })
this.$router.push({ name: 'Home' })

回答3:

In my case, I found that my beforeRouteUpdate does not execute next() method

Bad:

beforeRouteUpdate(to, from, next) {
  /*
  something...
  */
}

Good:

beforeRouteUpdate(to, from, next) {
  /*
  something...
  */

  next() // DO IT!
}

回答4:

I had the same problem. Make sure you set mode: 'history' in the router

回答5:

I know this topic is a little old, but having come across this issue in particular with Nuxt & Vue I wanted to just give a little update that might help some people.

login() {
    this.$auth.loginWith('local', {
        data: {
            username: this.username,
            password: this.password,
        }
    });
    this.$router.push({name: 'dashboard'});
}

My code was originally this, but I forgot to ensure that I was either using a Promise or using an Async / Await method.

The correct code (in my case) looked like this;

async login() {
    await this.$auth.loginWith('local', {
        data: {
            username: this.username,
            password: this.password,
        }
    });
    this.$router.push({name: 'dashboard'});
}

As I said, you can use .then() and such if otherwise needed. But I didn't want to not put this out there to whoever might need it. Rookie mistake on my part.

回答6:

I don't really like the $router.go approach because it's doing a full refresh of the page.

In my case, the reason why it was not working was because I was trying to $router.push to a protected route BEFORE updating the states. *More specifically, I was dependant on Firebase onAuthStateChanged to update the states and I was trying to $router.push before this action that I had no control over. *

Suggestions:

Make sure the states your middleware depend on (on your protected route) are committed before trying to push to that route.
Push to a non protected route like 'index' and make your components reactive based on state values. (Not the best approach)
- What I ended up doing with Firebase Auth was to create another action committing the same states my firebase onAuthStateChanged was committing but doing it myself in my async function.

Hope it helps. Cheers

回答7:

I had the same issue with this.$router.push('/') seemingly not working, as I got no redirect and no errors in the log. What I failed to realize was that I had a little piece of middleware that was looking if a auth token was set. I had it look in the wrong store, so naturally it would always return falls. Remember to look in your middleware if you have that, as it won't return an error on router.push()

来源：https://stackoverflow.com/questions/50629549/vue-router-this-router-push-not-working-on-methods

标签

Vue.js

vue-router