链接到带有 Vue.js 参数的路由答案

【问题标题】：Link to a route with a parameter of Vue.js链接到带有 Vue.js 参数的路由
【发布时间】：2016-07-12 00:48:15
【问题描述】：

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

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

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

我真的必须手动将路由方法的结果与 Javascript 中的 Vue 变量合并吗？

在我看来是这样的：

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

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

【问题讨论】：

与下面的问题类似，但我需要将“后端参数”合并到链接目标中：stackoverflow.com/questions/32560184/…
你是在使用 laravel 还是 vue-router 进行路由？我想不出一种方法可以使我的头脑清醒，因为它们要么需要路径，要么需要命名路由 + 参数
我正在使用 laravel 进行路由。
嗯，你试过<a href="{{ route("product::details", ['product' => '@{{ product.id }}']) }}">@{{ product.id }}</a>吗？

标签： php laravel laravel-5 vue.js

【解决方案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”，并使用所需的值。

希望对你有帮助。

【讨论】：