如何在Vue.js组件的a标签href中使用带ID参数的Laravel路由

根据Vue组件与Laravel的集成方式，分两种场景处理：

场景1：Vue组件嵌入Laravel Blade模板中 #

如果你的Vue代码直接写在Blade模板里（内联Vue或Blade引入单文件组件），可直接通过Blade语法生成路由URL，再用Vue属性绑定赋值给href：

<a :href="{{ route('admin.shop.time.edit', 1) }}" class="btn btn-sm btn-white">
  <i class="tio-edit"></i>
</a>

若ID是动态值（比如来自Blade循环变量），直接替换参数即可：

{{-- 假设Blade中有$timeItem变量 --}}
<a :href="{{ route('admin.shop.time.edit', $timeItem->id) }}" class="btn btn-sm btn-white">
  <i class="tio-edit"></i>
</a>

场景2：Vue为独立SPA/无法直接使用Blade语法 #

如果Vue是独立项目，无法直接调用Laravel的route()函数，需先让后端把路由URL传递给前端：

1. 在Laravel的Blade入口文件（如app.blade.php）中注入全局变量：

<script>
window.routeUrls = {
  editTime: "{{ route('admin.shop.time.edit', 1) }}"
};
</script>

2. 在Vue组件中直接使用该全局变量：

<a :href="window.routeUrls.editTime" class="btn btn-sm btn-white">
  <i class="tio-edit"></i>
</a>

若ID是Vue组件内的动态值（比如data中的timeId），可先注入路由基础路径，再拼接ID：

{{-- Blade中注入基础路径 --}}
<script>
window.baseEditUrl = "{{ route('admin.shop.time.edit', '') }}";
</script>

{{-- Vue组件中拼接动态ID --}}
<a :href="`${window.baseEditUrl}/${timeId}`" class="btn btn-sm btn-white">
  <i class="tio-edit"></i>
</a>

注意：需确保Laravel路由定义中参数位置正确（如/admin/shop/time/{id}/edit），否则拼接会出错。

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