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

Posted 2023-02-22

【中文标题】链接到带有 Vue.js 参数的路由

【英文标题】：Link to a route with a parameter of 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 解析/注入？

【问题讨论】：

与下面的问题类似，但我需要将“后端参数”合并到链接目标中：***.com/questions/32560184/…

你是在使用 laravel 还是 vue-router 进行路由？我想不出一种方法可以使我的头脑清醒，因为它们要么需要路径，要么需要命名路由 + 参数

我正在使用 laravel 进行路由。

嗯，你试过<a href=" route("product::details", ['product' => '@ product.id ']) ">@ product.id </a>吗？

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

希望对你有帮助。