使用 router.push 更新路由后无法调度操作答案

【问题标题】：Unable to dispatch an action after updating the route using router.push使用 router.push 更新路由后无法调度操作
【发布时间】：2021-04-16 06:56:28
【问题描述】：

在使用this.$router 更新路由后尝试调度操作时，该操作使用之前的路由参数而不是当前的路由参数。

假设我想移动到/home，目前，我在/about 并且在商店操作called 我想访问路由名称，但是在推送新路由然后调用操作之后，它只使用以前的路线，而不是更新的路线。

this.$router.push('/home', this.$store.dispatch('called'))

另外，我尝试使用this.$router.push('/home').then(this.$store.dispatch('called'))，但它给出了未定义的错误。

【问题讨论】：

这个动作有什么作用？可能有更好的地方来称呼它，这取决于。
@Dan，它只是从路由中获取任何查询（如果存在）。
在这种情况下，请尝试从beforeEnter 或beforeEach route guard 调用它。
但是，我只想在单击特定方法时检查是否存在查询，并且该方法调用也负责更改路由。
为什么不将查询传递给操作？

标签： vue.js vuex vue-router

【解决方案1】：

您可以通过该方法传递新旧查询：

methods: {
  changeRoute() {
    const queryNew = { id: 1 };                              // Create new query
    const queryOld = { ...this.$route.query };               // Clone old query
    this.$router.push({ path: '/home', query: queryNew });   // Navigate
    this.$store.dispatch('called', { queryNew, queryOld });  // Call the action
  }
}

动作签名应如下所示：

actions: {
  called({ commit }, { queryNew, queryOld }) {
    console.log(queryNew, queryOld);
  }
}

【讨论】：