使用参数Vue.js链接到路由

Question

我正在使用Vue.js和Laravel来绘制一个列出产品的简单表格。从那里，我想链接到产品详细信息页面，如下所示：

<a href="{{ route("product::details", ['product' => '???']) }}">@{{ product.id }}</a>

由于该表是在客户端基于数据对象生成的，因此我正在寻找实现该方法的最优雅的方式，同时又不绕过任何route()允许我链接到命名路由的laravel方法。

我是否真的必须手动将route-method的结果与Javascript中的Vue变量合并？

在我看来是这样的：

<a href="{{ route("product::details", ['product' => ':product.id']) }}">@{{ product.id }}</a>

Vue通过数据绑定可以解析/注入哪些内容？

Answer 1

作为Vue的客户端，而laravel的服务器端，您无法以这种方式实现。

但是您可以在渲染的路线上执行以下操作：

创建Vue方法

goto_route: function (param1) {
      route = '{{ route('yournamedroute', ['yourparameter' => '?anytagtoreplace?']) }}'
      location.href = route.replace('?anytagtoreplace?', param1)

}

现在在您的动作元素中

<div v-for="o in object">
<a v-on:click="goto_route(o.id_key)">press</a>
</div> 

基本上，您正在替换...嗯...让我们在渲染路线中将其命名为“ placehoder”，并带有所需的值。

希望能帮助到你。