如何使用Vuex动作中的Vue路由器进行导航

JavaScript

理查德Itachi

2020-03-11

我正在使用Vue 2.x和Vuex 2.x创建一个Web应用程序。我正在通过http调用从远程位置获取一些信息,我希望如果该调用失败,我应该重定向到其他页面。

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

但是this.$router.push({path:"/"})给我以下错误。

未捕获(承诺)TypeError:无法读取未定义的属性“ push”

如何做到这一点。

模拟的JsFiddle:在这里

第578篇《如何使用Vuex动作中的Vue路由器进行导航》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
十万个冷笑话 2020.03.11

我不喜欢将应用程序的位置状态与商店中其余应用程序状态分开,并且不希望同时管理路由器和商店,所以我创建了一个Vuex模块来管理商店位置状态

现在,我可以像其他状态更改一样通过调度动作进行导航:

dispatch("router/push", {path: "/error"})

这具有使动画页面过渡之类的内容更易于处理的附加好处。

滚动自己的router模块并不难,但是如果您愿意,也可以尝试使用我模块:

https://github.com/geekytime/vuex-router

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android