使用参数Vue.js链接到路由 [英] Link to a route with a parameter of Vue.js

问题描述

我正在使用Vue.js和Laravel绘制一个列出产品的简单表格.我想从那里链接到这样的产品详细信息页面:

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

由于该表是在客户端基于数据对象生成的，因此我正在寻找实现这一点的最优雅的方法，同时又不绕过任何等laravel方法，而这些方法允许我链接到命名路由. /p>

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

在我心中是这样的:

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

我可能可以通过数据绑定由Vue解析/注入吗?

解决方案

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"，并使用所需的值.

希望有帮助.

I'm using Vue.js and Laravel to render a simple table listing products. From there I want to link to a product detail page like this:

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

Since the table is generated on client side base on a data object, I'm looking for the most elegant way to implement that while not bypassing any laravel methods like route() that allows me to link to a named route.

Do I really have to manually merge the result of the route-method with the Vue variable in Javascript?

In my mind is something like:

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

which I could probably parse/inject by Vue via data binding?

解决方案

As Vue it's client side and laravel it's server side you can't accomplish that in that way.

But you can do something like this over the rendered route:

Create a vue method

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

}

Now in your action element

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

Basically you're replacing the... uhmm... let's name it "placehoder" in the rendered route with the required value.

hope it helps.

这篇关于使用参数Vue.js链接到路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！