Vue/Laravel首次CRUD开发：创建请求路由报错求助

咱们先逐个拆解你遇到的问题，从报错信息到代码逻辑一步步梳理：

你的代码与报错信息 #

前端Vue代码：

async addDespesa() { 
  let uri = "api/despesas/create"; 
  const response = await axios.get(uri, this.despesa).then((response) => { 
    this.$router.push({ name: "despesas" }); 
  }); 
}

后端Laravel代码：

public function create() { 
  // 暂无逻辑
}

控制台报错：

[vue-router] Route with name 'despesas' does not exist
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".
at createRouterError
at createNavigationDuplicatedError
at HashHistory.confirmTransition
at HashHistory.transitionTo
at eval
at HashHistory.push
at new Promise
at VueRouter.push
at eval

第一个错误：路由名despesas不存在 #

这个问题很直接——你的Vue路由配置里没有定义名为despesas的路由。你需要打开路由配置文件（一般是src/router/index.js），确保添加了对应的命名路由：

示例路由配置：

const routes = [
  // 其他路由...
  {
    path: '/despesas', // 替换成你的支出列表页实际路径
    name: 'despesas', // 必须和你push时用的name完全一致
    component: () => import('../views/DespesasList.vue') // 替换成你的列表组件路径
  }
]

第二个错误：重复导航（NavigationDuplicated） #

这个错误是因为你当前已经处于目标路由的路径下（比如当前页面就是/，而despesas路由的path也是/），再次调用$router.push就会触发重复导航警告。解决方法有两种：

方法1：跳转前先判断当前路由 #

修改你的前端代码，先检查当前路由是否已经是目标路由，再执行跳转：

async addDespesa() { 
  // 重点：创建资源要用POST请求，不是GET！后面会详细说
  try {
    const response = await axios.post("api/despesas", this.despesa);
    // 判断当前路由不是despesas时再跳转
    if (this.$router.currentRoute.name !== 'despesas') {
      this.$router.push({ name: "despesas" }); 
    }
  } catch (error) {
    // 别忘了加错误处理，方便排查请求失败的原因
    console.error('创建支出失败:', error);
  }
}

方法2：全局捕获路由重复错误 #

如果不想每次跳转都写判断，可以在路由初始化时添加全局错误处理，避免控制台报错：

const router = new VueRouter({
  // 你的路由配置项
})

// 重写push方法，捕获重复导航错误
router.push = function push(location) {
  return VueRouter.prototype.push.call(this, location).catch(err => err)
}

额外的关键问题：HTTP请求方法错误 #

你当前用axios.get发送创建请求，这是不符合REST规范的：

• GET请求用于获取数据，Laravel资源路由里的create方法默认是GET，用来返回创建表单页面
• 创建资源应该用POST请求，对应Laravel资源路由的store方法

修正步骤： #

1. 前端修改请求方法和URI：

   // 把api/despesas/create改成api/despesas，用POST方法
   const response = await axios.post("api/despesas", this.despesa);
   

2. 后端完善逻辑：
   确保你的Laravel路由文件（routes/api.php）里有资源路由：

   Route::resource('despesas', DespesaController::class);
   

   然后在DespesaController里实现store方法（而不是create方法）：

   public function store(Request $request)
   {
       // 先验证请求数据
       $validated = $request->validate([
           // 替换成你的实际字段验证规则，比如：
           'descricao' => 'required|string|max:255',
           'valor' => 'required|numeric|min:0',
           'data' => 'required|date'
       ]);
   
       // 创建支出记录
       Despesa::create($validated);
   
       // 返回成功响应
       return response()->json(['message' => '支出创建成功！'], 201);
   }
   

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