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

Question

我正在使用Vue.js和Laravel渲染一个简单的产品列表表格。从那里，我想链接到像这样的产品详细信息页面： '???']) }}">@{{ product.id }} 由于该表格是基于数据对象在客户端生成的，因此我正在寻找最优雅的实现方式，同时不绕过任何Laravel方法（如route()），该方法允许我链接到命名路由。

我真的需要手动将route方法的结果与Vue变量在JavaScript中合并吗？

在我脑海中的是这样的东西： ':product.id']) }}">@{{ product.id }} 我可以通过Vue通过数据绑定解析/注入它吗？

- patriziotomato

---

类似于以下问题，但我需要将“后端参数”合并到链接目标中：https://dev59.com/uFwY5IYBdhLWcg3wgH3y - patriziotomato

你是在使用laravel或vue-router进行路由吗？我暂时想不到这该如何实现，因为它们都需要路径或带参数的具名路由。 - Jeff

我正在使用 Laravel 进行路由。 - patriziotomato

你尝试过这个吗？<a href="{{ route("product::details", ['product' => '@{{ product.id </a>']) }}">@{{ product.id }}}} - Raj Kamal

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> 

基本上，您正在用所需值替换呈现路由中的“占位符”。

希望这有所帮助。

- Antonio BG