从 Blade 文件转换或使用 Laravel 路由以在 Vue 组件中使用答案

【问题标题】：Convert or Use Laravel Routes from Blade file to be used in Vue Component从 Blade 文件转换或使用 Laravel 路由以在 Vue 组件中使用
【发布时间】：2020-12-21 19:38:53
【问题描述】：

如何转换 laravel/blade 路由以在 Vue.js 文件中使用。

我正在将刀片模板转换为 vue 组件。在index.blade.php 中，我有一条在整个文件中使用的路由，如下所示：

   <a href="{{ route('product.show', ['id' => $product->id]) }}" target=""></a>

现在我希望能够像这样在我的 Vuejs 文件中使用 {{ route('product.show', ['id' => $product->id]) }}：

<template>
    <div>
        <h1>My Products</h1>
         <a href="ROUTE_GOES_HERE" target=""></a>
    </div>
</template>

在我的 index.blade.php 文件中，我使用路由绑定来调用组件：

<product :route={{ route('product.show' ['id' => $product->id]) }}"></product>

我不确定如何在我的 Vue 文件中使用它。在不安装外部包或库的情况下执行此操作的最佳方法是什么？

【问题讨论】：

标签： php laravel vue.js laravel-blade

【解决方案1】：

MrEduar 的答案适用于较小的案例。随着您共享的路线数量的增加，请考虑使用类似 Ziggy 的东西，它会生成一个适合 JS 的路线版本，以及用于与它们交互的 API。

【讨论】：

【解决方案2】：

最好的方法是将路由作为属性传递给组件。

<MyComponent :route="{{ route('product.show', ['id' => $product->id]) }}"></MyComponent>

所以在你的组件中

<template>
    <div>
        <h1>My Products</h1>
         <a :href="route" target=""></a>
    </div>
</template>

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

如果你不想这样做，你可以简单地将静态路由放在你的 js 文件中。通常路线不会经常变化

【讨论】：

你好，我已经在我的问题中添加了我的组件，以展示我如何在 index.blade.php 中设置路由。但是一旦我将路由作为属性，我如何在我的 vue.js 文件中使用它来替换旧的路由格式？谢谢。
我明白了，当我的组件中绑定了路由时，我的 vue 文件中的 href 属性正在使用路由的绑定值！谢谢
是否可以将多个路由绑定到单个组件调用？
只需在属性上传递一个数组并更改属性的类型。