在我的组件中,我一直在使用:
this.$router.push({ name: 'home', params: { id: this.searchText }});
改变路由.我现在已经在Vuex操作中使用了一种方法,当然this.$router
不再有效.Vue.router
也没有.那么,我如何从Vuex状态调用路由方法呢?
在我的组件中,我一直在使用:
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 }})
})