在我的组件中,我一直在使用:

this.$router.push({ name: 'home', params: { id: this.searchText }});

改变路由.我现在已经在Vuex操作中使用了一种方法,当然this.$router不再有效.Vue.router也没有.那么,我如何从Vuex状态调用路由方法呢?

推荐答案

我假设vuex-router-sync在这里没有帮助,因为你需要路由实例.

因此,尽管这并不理想,但您可以将该实例设置为Web包中的全局实例,即.

global.router = new VueRouter({
  routes
})

const app = new Vue({
  router
  ...

现在你应该可以在你的应用程序中的任何地方:router.push({ name: 'home', params: { id: 1234 }})


作为替代,如果你不喜欢上述 idea ,你可以从你的行动中回报一个promise .然后,如果这个动作成功完成,我想它会引发一个Mutations 或其他什么,你可以兑现promise .然而,如果它失败了,无论重定向需要什么条件,你都会得到promise .

通过这种方式,您可以将路由重定向到一个组件中,该组件只捕获被拒绝的promise 并触发vue路由推送,即.

# vuex
actions: {
  foo: ({ commit }, payload) =>
    new Promise((resolve, reject) => {
      if (payload.title) {
        commit('updateTitle', payload.title)
        resolve()
      } else {
        reject()
      }
    })

# component
methods: {
  updateFoo () {
    this.$store.dispatch('foo', {})
      .then(response => { // success })
      .catch(response => {
        // fail
        this.$router.push({ name: 'home', params: { id: 1234 }})
      })

Vue.js相关问答推荐

无法解析组件:google—pay—button

带 Bootstrap 的 Vue js,导航栏菜单不起作用

Vuetify 3 - NavBar 组件占据整个视口高度

在 onMounted 之前渲染的 Vue 模板

在 VueJS 中存储图像的正确位置是什么 - 公共文件夹或assets文件夹?

在 Vue.js 中动态挂载单个文件组件

Webpack 你可能需要一个合适的加载器来处理这个文件类型

vuejs中watch方法和计算方法有什么区别

为什么Vue.js 使用单字标签

vuejs 中的单元测试

在 vue-router 中带有路由的 Vuejs2 模态

如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中?

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

Jest错误找不到模块....

Vue Js如何在单个文件模板中使用mixins?

使计算的 Vue 属性依赖于当前时间?

使密码字符隐藏在 Vuetify 字段中

在子元素 vueJS.2 之间切换active类

如何在 Vue.js 2 应用程序中模拟 onbeforeunload?

超过最大调用堆栈大小 Vuetify