Laravel+InertiaJS+Vue3如何传递服务端生成的URL至客户端？

针对你的场景，推荐两种实现方案，按需选择：

方案一：基于Inertia临时闪存数据（简单场景） #

通过Inertia的闪存数据传递生成的URL，前端页面加载后读取并处理表单提交。

控制器代码修改 #

public function generate(Event $event)
{ 
    $url = $this->generator->getURL($event);
    // 用闪存数据临时存储URL，页面刷新后自动清除
    return back()->with('generatedUrl', $url);
}

前端Vue组件处理 #

<script setup>
import { usePage } from '@inertiajs/vue3';
import { onMounted } from 'vue';

const page = usePage();

onMounted(() => {
  const generatedUrl = page.props.flash.generatedUrl;
  if (generatedUrl) {
    submitPostForm(generatedUrl);
  }
});

// 动态创建POST表单并提交
function submitPostForm(url) {
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = url;

  // 若需额外参数，添加隐藏input
  // const paramInput = document.createElement('input');
  // paramInput.type = 'hidden';
  // paramInput.name = 'custom_param';
  // paramInput.value = 'xxx';
  // form.appendChild(paramInput);

  document.body.appendChild(form);
  form.submit();
}
</script>

方案二：AJAX请求（无刷新体验） #

前端直接发送AJAX请求获取URL，无需页面刷新，体验更流畅，是更推荐的现代前端方案。

控制器代码修改 #

public function generate(Event $event)
{ 
    $url = $this->generator->getURL($event);
    // 返回JSON响应，无需重定向
    return response()->json([
        'url' => $url,
        // 可额外返回需要的参数
        // 'params' => ['key' => 'value']
    ]);
}

前端Vue组件处理 #

<template>
  <table>
    <tr v-for="event in events" :key="event.id">
      <td>{{ event.name }}</td>
      <td>
        <button @click="handleGenerate(event.id)">生成并跳转</button>
      </td>
    </tr>
  </table>
</template>

<script setup>
import { usePage } from '@inertiajs/vue3';
import { ref } from 'vue';

const page = usePage();
const events = ref(page.props.events);

async function handleGenerate(eventId) {
  try {
    const response = await fetch(`/events/${eventId}/generate`, {
      method: 'GET', // 可根据路由定义改为POST
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
      }
    });
    const data = await response.json();
    
    if (data.url) {
      submitPostForm(data.url);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
}

function submitPostForm(url) {
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = url;

  // 添加CSRF令牌（同域目标URL需添加）
  const csrfInput = document.createElement('input');
  csrfInput.type = 'hidden';
  csrfInput.name = '_token';
  csrfInput.value = document.querySelector('meta[name="csrf-token"]').content;
  form.appendChild(csrfInput);

  // 若需传递额外参数，遍历添加隐藏input
  // Object.entries(data.params).forEach(([key, value]) => {
  //   const input = document.createElement('input');
  //   input.type = 'hidden';
  //   input.name = key;
  //   input.value = value;
  //   form.appendChild(input);
  // });

  document.body.appendChild(form);
  form.submit();
}
</script>

方案对比 #

• 方案一：依赖页面刷新，代码改动小，适合对体验要求不高的场景
• 方案二：无页面刷新，用户体验更优，是现代前端的首选方案

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