如何在vue中的store.js文件中动态路由

Question

我在 store.js (vuex) 中有一个函数，它检查一些条件，如果满足，它应该启动到另一个组件的路由。

this.$router.push() 在 store.js 中不起作用。

vm.$router.push() 都不起作用，这里 vm = new Vue()。

Answer 1

TL;DR 不需要使用vue实例来引用router，只需导入router，然后使用它的方法即可。

假设您的 router.js 看起来像这样。

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

Vue.use(Router);

export default new Router({
  routes: [
    /* ... */
  ],
});

然后您可以将其导入您的 store.js

import router from './router';

以便您可以像这样在 store.js 中使用它。

import Vue from 'vue';
import Vuex from 'vuex';
import router from './router';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        username: '',
    },
    mutations: {
      updateUsername(state, payload) {
          state.username = payload;
      }
    },
    actions: {
        updateUsername({ commit }, payload) {
            commit('updateUsername', payload);
            router.push('/');  // <--- router
        },
    },
});

如何在vue中的store.js文件中动态路由

how to route dynamically in store.js file in vue

vue.js

vuejs2

vue-router

vuex