如何使用 Vue 路由器从 Vuex 操作进行导航

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:"/"})

给了我以下错误。

未捕获（承诺中）类型错误：无法读取未定义的属性“push”

如何才能实现这一点。

模拟 JsFiddle：这里

Answer 1

只要您从应用程序中的某个位置导出路由器实例（例如

./router.js

），您就可以

import

将其用于您想要的任何地方 - 包括 Vuex 商店：

import router from './router';

从那里，您可以使用

router.push()

。

就这么简单。

Answer 2

这个例子可能对你有帮助。

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 3

初步回答

在

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

附注使用

import { vm } from '@/main'

我们可以访问

Vuex

中所需的任何内容，例如

vm.$root

的某些组件需要

bootstrap-vue

。

P.P.S。看来我们可以在所有内容都加载完毕后使用

vm

。换句话说，如果我们在

vm

中调用

someMutation

，我们不能在

someMutation

中使用

mounted()

，因为

mounted()

在创建

vm

之前出现/出现。

---

新答案

Constantin 的 answer（已接受的答案）比我的好，所以只是想向新手展示如何实现它。

在核心目录内部（在我的情况下在

/src

内部），在

App.vue

、

main.js

和其他目录旁边，我有

router.js

，其内容为：

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

// Traditional loading
import Home from '@/components/pages/Home/TheHome'

// Lazy loading (lazy-loaded when the route is visited)
const Page404 = () => import(/* webpackChunkName: "Page404" */ '@/components/pages/404)
const Page503 = () => import(/* webpackChunkName: "Page503" */ '@/components/pages/503)

Vue.use(Router)

const router = new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'active',
  routes: [
    {
      path: '*',
      name: 'Page404',
      component: Page404
    },

    {
      path: '*',
      name: 'Page503',
      component: Page503
    },

    {
      path: '/',
      name: 'Home',
      component: Home
    },

    // Other routes
    {....},
    {....}
  ]
})

// Global place, if you need do anything before you enter to a new route.
router.beforeEach(async (to, from, next) => {
  next()
})

export default router

将我们的路由器导入到

main.js

:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

const vm = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export { vm }

最后，在你的组件、Vuex 或其他任何地方

import router from './router'

并执行你需要的任何操作，例如

router.push(...)

Answer 4

看起来您没有将路由器注入您的应用程序，因此它是“未定义”

在以前版本的 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

的形式可用

---

以下回答相关问题：如何从Vuex状态使用Vue Router？似乎Vuex不会在

this.$router

处接收到路由器实例。因此，建议使用两种方法来提供对路由器实例的访问。

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

第二个涉及在 vuex 操作中使用 Promise，这将允许您的组件在 Promise 解析/拒绝操作之后利用它们对路由器实例的引用。

Answer 5

我不喜欢将应用程序的位置状态与商店中应用程序的其余状态分开，并且必须管理路由器和商店，因此我创建了一个 Vuex 模块来管理商店内部的位置状态。

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

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

这还有一个额外的好处，就是使动画页面转换等事情更容易处理。

推出自己的

router

模块并不难，但如果您愿意，也可以尝试我的：

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

Answer 6

您可以像这样简单地从路由器目录导入路由：

import router from '@/router'

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

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