Vue3+Laravel中route.push报错TypeError: route.push is not a function

一、route.push报错的直接解决 #

你遇到的route.push is not a function错误，核心原因是混淆了路由实例（router）和当前路由对象（route）：

• useRoute()返回的是当前路由的状态对象（包含params、query等信息），没有push方法；
• 需要用useRouter()获取路由实例，它才提供push、replace等跳转方法。

正确代码示例（Script Setup语法）：

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter(); // 获取路由实例

const addCategory = async () => {
  // 提交逻辑...
  router.push('/'); // 执行跳转
}
</script>

二、其他潜在问题排查 #

1. 表单默认提交行为干扰 #

如果你的提交按钮在<form>标签内，且按钮类型是submit，点击时会触发浏览器默认的表单提交（页面刷新），打断Vue的路由跳转逻辑。

• 解决方式1：在函数中阻止默认行为

const addCategory = async (e) => {
  e.preventDefault(); // 阻止浏览器默认提交
  // 后续逻辑
}

• 解决方式2：修改按钮类型

<button type="button" @click="addCategory">提交</button>

2. 异步操作未做错误处理 #

如果addCategory包含异步请求（比如调用Laravel API），未捕获的请求失败会导致代码终止，路由跳转不会执行。

const addCategory = async () => {
  try {
    // 调用Laravel接口提交数据
    await axios.post('/api/categories', { name: categoryName.value });
    router.push('/');
  } catch (error) {
    console.error('提交失败:', error.response?.data?.message || '网络错误');
    // 可添加用户提示，比如弹出错误弹窗
  }
}

3. Laravel API的CSRF令牌问题 #

调用Laravel的POST/PUT/DELETE接口时，必须携带CSRF令牌，否则会返回419错误：

• 先在Blade模板中添加CSRF元标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

• 配置axios自动携带令牌：

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

4. 前后端数据验证缺失 #

• 前端：提交前验证输入合法性，避免空值或无效数据提交

const addCategory = async () => {
  if (!categoryName.value.trim()) {
    alert('分类名称不能为空');
    return;
  }
  // 后续提交逻辑
}

• 后端：Laravel控制器中添加验证规则，防止非法数据入库

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255|unique:categories',
    ]);

    Category::create($validated);
    return response()->json(['message' => '分类创建成功']);
}

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