Question

我正在使用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：无法读取属性＆＃39; push＆＃39;未定义的

如何实现这一目标。

模拟JsFiddle：here

Answer 1

import router from './router'

并使用router.push

很简单。

Answer 2

看起来您没有将路由器注入您的应用，因此它未被定义＆＃39;

在先前版本的vue-router中，您可以：Vue.use(VueRouter)，使用2.0，您可以将路由器注入应用程序，如下所示：

const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router // inject the router
}).$mount('#app')

然后应该在整个应用中将其设为this.$router

在回答相关问题之后：How to use Vue Router from Vuex state?似乎Vuex无法在this.$router收到路由器实例。因此，建议使用两种方法来提供对路由器实例的访问。

第一个是更直接的，涉及将webpack全局设置为实例。

第二种方法是将Promise与你的vuex动作结合使用，这将允许你的组件在Promise解析/拒绝后执行对路由器实例的引用。

Answer 3

此示例可能对您有所帮助。

main.js

import Vue from "vue";
import VueRouter from "vue-router";

...

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'hash',
    base: "./",
    routes: [
        { path: "/", component: welcome},
        { path: "/welcome", component: welcome},

    ]
})

actions.js

import {router} from "../main.js"

export const someAction = ({commit}) => {

    router.push("/welcome");
}

Answer 4

我不想让我的应用程序的位置状态与商店中我的应用程序状态的其余部分分开，并且必须管理路由器和商店，所以我创建了一个管理的Vuex模块位置里面商店。

现在，我可以通过调度操作进行导航，就像任何其他状态更改一样：

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

这样可以让动画页面过渡更容易处理。

推出自己的router模块并不难，但如果您愿意，也可以尝试使用我的模块：

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

Answer 5

在main.js中（我们在其中“安装”所有模块并创建Vue实例，即src/main.js的那个）：

const vm = new Vue({
  el: '#app',
  router,
  store,
  apolloProvider,
  components: { App },
  template: '<App/>'
})

export { vm }

这是我的示例，但对于我们而言，这里最重要的是const vm和router

在您的store中：

import { vm } from '@/main'

yourMutation (state, someRouteName) {
  vm.$router.push({name: someRouteName})
}

P.S。使用import { vm } from '@/main'，我们可以访问Vuex中所需的任何内容，例如vm.$root的某些组件所需的bootstrap-vue。

P.P.S。似乎在加载所有内容后，我们就可以使用vm了。换句话说，如果我们在vm内部调用someMutation，我们将无法在someMutation内使用mounted()，因为mounted()在{{1}之前出现}。

Answer 6

您可以简单地从路由器目录导入路由，如下所示：

import router from '@/router'

router.push({name: 'Home'})

这个@符号替换src目录的路径

如何使用Vuex操作中的vue路由器进行导航

6 个答案:

main.js

actions.js