路由器推送在axios响应中不工作-Vue/Typescript

使用vue属性装饰器的示例代码：

@Component
export default class Login extends Vue {
  private mounted(): void {
    this.$router.push({ name: 'home' })
  }
}

当安装组件时，上面的代码成功重定向。但是，当在axios的响应中使用

this.$router.push（）

时，什么也不会发生：

private login(): any {
  return this.$http
    .login(this.form)
    .then(resp => {
      this.$store.dispatch('authenticateUser', user)
      this.$router.push({ name: 'home' })
    })
    .catch(err => {
      console.log(err)
    })
}

但是在这种情况下，

this.$store.dispatch（）

与inted一样工作，而不是

this.$router.push（）

。可能有什么问题

路由器配置：

import Vue from 'vue'
import Router from 'vue-router'

// routes
import auth from '@/routes/auth'
import dashboard from '@/routes/dashboard'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    ...auth,
    ...dashboard
  ]
})

验证中间件：

import store from '@/store'

export default {
  guest(to: any, from: any, next: any): void {
    if (store.state.auth.authenticated === false) {
      next()
    } else {
      next({
        path: '/dashboard'
      })
    }
  },
  auth(to: any, from: any, next: any): void {
    if (store.state.auth.authenticated) {
      next()
    } else {
      next({
        path: '/'
      })
    }
  }
}

验证路由（@/routes/Auth）：

---

问题在于身份验证中间件中，如果我在进入前删除

，

路由器正在推送请求的视图。

我必须使用

中的承诺。$store.dispatch（）

，如下所示：

this.$store.dispatch('authenticateUser', user).then(() => {
  this.$router.push({ name: 'dashboard' })
})

---

路由器推送无效，因为它试图导航到另一个页面，而操作分派尚未完成，因此我的用户未通过身份验证，因此guard不允许我重定向。

请共享您的路由器配置好吗？另外，看看这个$router.push抛出了什么错误也会很有帮助。$router.push（{path:'}）@Krantisinh，并没有错误，只是并没有重定向，用router.ts更新了我的问题。Atul，不管是路径还是名称。

this.$store.dispatch('authenticateUser', user).then(() => {
  this.$router.push({ name: 'dashboard' })
})