无需Axios：Laravel获取用户详情并在Vue.js展示的实现问题

1. Vue 函数的错误修正 #

你当前的getUserDetails写法有问题——route()只是用来生成路由URL的工具，不能直接发起HTTP请求。而且请求是异步操作，必须处理异步逻辑才能正确获取数据。

2. Laravel 控制器返回数据的正确方式 #

两种写法都能正常返回JSON数据，但显式声明返回JSON响应更规范：

• 写法一：直接返回模型实例，Laravel会自动把它序列化为JSON：

public function details($id) {
  $userDetails = User::find($id);
  return $userDetails;
}

• 写法二：用response()->json()显式返回，还能自定义状态码或附加其他数据：

public function details($id) {
  $userDetails = User::find($id);
  return response()->json($userDetails, 200);
}

如果要处理用户不存在的情况，推荐用findOrFail自动返回404：

public function details($id) {
  $userDetails = User::findOrFail($id);
  return response()->json($userDetails);
}

3. 不使用 Axios 的实现方式 #

方案一：浏览器原生 Fetch API #

无需额外安装依赖，直接用浏览器内置的Fetch发起请求：

const response = ref(null);
const popup = ref(false);

const getUserDetails = async (id) => {
  try {
    const requestUrl = route('user.Details', { id: id });
    const res = await fetch(requestUrl);
    if (!res.ok) throw new Error('获取用户详情失败');
    response.value = await res.json();
    popup.value = true;
  } catch (error) {
    console.error(error);
    // 这里可以加错误提示，比如弹出提示框告知用户请求失败
  }
};

方案二：VueUse 的 useFetch（Vue 3 组合式 API 场景） #

如果你的项目是 Vue 3 且用了组合式 API，可以用@vueuse/core库的useFetch（需要先安装npm install @vueuse/core）：

import { useFetch } from '@vueuse/core';

const popup = ref(false);
let response = ref(null);

const getUserDetails = (id) => {
  const requestUrl = route('user.Details', { id: id });
  const { data } = useFetch(requestUrl).get().json();
  response = data;
  popup.value = true;
};

方案三：服务端预渲染数据（Blade 模板场景） #

如果用户列表是在 Laravel Blade 里渲染的，可以直接把用户详情内嵌到页面，点击按钮时直接读取本地数据，不用发AJAX请求：

• Blade 模板代码：

@foreach($users as $user)
  <tr>
    <td>{{ $user->name }}</td>
    <td>
      <button @click="showUserDetails({{ json_encode($user) }})">查看详情</button>
    </td>
  </tr>
@endforeach

<script setup>
import { ref } from 'vue';

const popup = ref(false);
const response = ref(null);

const showUserDetails = (userData) => {
  response.value = userData;
  popup.value = true;
};
</script>

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