Vue路由router.js中store未定义：重定向前调用store.dispatch失败

看起来你碰到了两个关联的问题：路由守卫里store未定义报错，以及添加条件判断后action完全没被执行。咱们一步步拆解解决：

1. 先搞定"store is not defined"报错 #

从你贴的router.js代码看，你已经导入了store，但报错大概率是这两个原因之一：

• 导入路径错误：确认./store/index.js的路径是否和你的项目结构匹配，比如如果router.js在src/router目录，那store路径应该是../store/index
• store实例未正确导出：检查你的store/index.js是否正确创建并导出了Vuex实例，比如应该有类似代码：

  import Vue from 'vue'
  import Vuex from 'vuex'
  import configuration from './modules/configuration/index'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    modules: {
      configuration
    }
  })
  

2. 修复action未被调用的核心问题 #

你当前写的store.dispatch("path/MY_ACTION")完全不匹配你的store结构！你的action是GET_DEFAULT_CONFIGURATION，且所在模块开启了namespaced: true，正确的调用方式必须加上模块名前缀：

store.dispatch("configuration/GET_DEFAULT_CONFIGURATION")

另外，如果你的action是异步操作（比如包含API请求），一定要等待dispatch完成后再执行next()，否则路由会直接跳转，action可能还没执行完：

beforeEnter: async (to, from, next) => {
  await store.dispatch("configuration/GET_DEFAULT_CONFIGURATION");
  next({ name: "destinationPath" });
}

3. 关于条件判断被跳过的问题 #

你说添加条件后错误消失但action没执行，调试器显示跳过了if语句，这几乎可以肯定是你的条件逻辑不满足导致的。建议：

• 在条件前打印相关变量的值，确认是否符合预期
• 检查条件表达式是否有语法错误（比如把===写成了=）

完整修正后的router.js示例 #

import Vue from 'vue'
import store from './store/index'
import Router from 'vue-router'
import Settings from './views/Settings.vue'

Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
  {
   path: '/myPath',
   name: 'myPathName',
   component: {},
   async beforeEnter(to, from, next) {
    try {
      // 调用正确命名空间下的action
      await store.dispatch("configuration/GET_DEFAULT_CONFIGURATION");
      next({ name: "destinationPath" });
    } catch (error) {
      // 处理action执行失败的情况，比如跳转到错误页
      console.error("Action执行失败:", error);
      next({ name: "errorPage" });
    }
   }
  }
 ]
})

额外提醒 #

• 注意action函数名的大小写，调用时要和定义的完全一致
• 模块开启namespaced: true后，所有action、mutation的调用都必须加上模块名前缀

内容的提问来源于stack exchange，提问作者Alexander