如何用Vue实现Laravel用户编辑路径动态生成与页面跳转？

完全可以用Vue动态生成目标URL，不用依赖try catch这类冗余写法，下面给你几种实用的实现方式：

1. 基础拼接法（快速实现） #

把用户ID作为props传入Vue组件，直接在模板里拼接路径：

<template>
  <a :href="`/profile/${userId}/edit`" class="btn btn-primary">编辑资料</a>
</template>

<script>
export default {
  props: {
    userId: {
      type: Number,
      required: true
    }
  }
}
</script>

在Laravel视图中使用组件时，直接传入用户ID：

<user-edit-button :user-id="{{ $user->id }}"></user-edit-button>

2. 基于Laravel路由命名（更规范） #

先给你的编辑路由添加名称，在routes/web.php中配置：

Route::get('/profile/{user}/edit', [EditController::class, 'edit'])->name('profile.edit');

方式A：Laravel预生成URL传入Vue #

在Laravel视图里提前用路由生成工具拿到URL，再传给组件：

<user-edit-button :edit-url="{{ route('profile.edit', $user) }}"></user-edit-button>

Vue组件直接使用传入的URL：

<template>
  <a :href="editUrl" class="btn btn-primary">编辑资料</a>
</template>

<script>
export default {
  props: {
    editUrl: {
      type: String,
      required: true
    }
  }
}
</script>

方式B：Vue内直接生成路由URL（SPA场景适用） #

如果是单页应用，可借助ziggy-js（Laravel官方推荐的路由生成工具）在Vue内直接调用Laravel路由规则：

<template>
  <a :href="route('profile.edit', userId)" class="btn btn-primary">编辑资料</a>
</template>

<script>
import route from 'ziggy-js';

export default {
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  methods: {
    route
  }
}
</script>

关于EditController与路由配置的注意点 #

确保你的EditController包含edit方法，利用Laravel的路由模型绑定直接获取用户实例：

namespace App\Http\Controllers;

use App\Models\User;

class EditController extends Controller
{
    public function edit(User $user)
    {
        // 根据需求返回编辑视图或数据
        return view('profile.edit', compact('user'));
    }
}

路由中使用{user}参数时，Laravel会自动根据ID查询对应User模型，无需手动写查询逻辑，更高效。

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