如何将Laravel路由参数传递到Vue？

Question

我是Vue的新手，我在Google上搜索了很多，但都没有找到适合我当前情况的解决方案，所以不知道如何将路由传递给Vue组件。有没有办法将Laravel路由传递到Vue模板中，就像下面这样。我的Vue位置在resource/assets/js。以下是代码：

               <template>
                   <a href={{route('/')}}></a>//i want to pass laravel route 
                                               //to view component this line 
                                                //throw error
               </template>

路由（web.php）代码

        Route::get('/' , function(){

                 Return view('homepage');
          });

我希望您能将此URL传递到Vue组件中，该组件的位置（Vue）位于resource/assets/js。

- Rocky

---

href={{route('/')}}：在属性内部的插值已被移除。请改用v-bind或冒号缩写。例如，不要使用<div id="{{ val }}">，而是使用<div :id="val">。如果使用v-bind或:href={{route('/')}}，会抛出原始表达式{{route('/')}}的错误。 - Rocky

Answer 1

你需要将它作为 prop 传递给你的 Vue 组件中。这是两个不同的步骤。

1. Laravel 会输出编译后的模板。

2. Vue 会解析组件并初始化它们。

在第二步，你需要传递一个路由参数，该参数是在第一步中解析的。

像这样：

<my-component route="{{ route('my-route') }}"></my-component>

然后在你的组件内部

<template>
    <a :href="route">CLICK HERE</a>
</template>

<script>
...
props: {
    route: { type: String, required: true }
}
...
</script>

- tiagojpdias

---

你必须在你的组件中传递这个属性。如果没有看到任何代码，很难进一步调试。 - tiagojpdias

Answer 2

请尝试使用

<a :href="{{route('/')}}"> or <a v-bind:href="{{route('/')}}">

- Abdulla Nilam

---

假设Vue js正在运行 - Abdulla Nilam

这里有两个错误，描述如下：

1. href={{route('/')}}：在属性内部使用插值已被移除。请改用v-bind或冒号缩写。例如，不要使用<div id="{{ val }}">，而是使用<div :id="val">。
2. 如果使用v-bind或:href={{route('/')}}，它会抛出原始表达式{{route('/')}}的错误。

- Rocky

我使用过这个，没有遇到类似的问题。 - Abdulla Nilam

你能给我展示一些示例代码吗？注意：我的Vue.js文件位于resource/asset/js目录下。 - Rocky

请查看此链接：https://scotch.io/tutorials/implement-a-favoriting-feature-using-laravel-and-vue-js#toc-creating-the-favorite-component - Abdulla Nilam

很抱歉，这个解决方案不适用于我的当前情况。 - Rocky

Answer 3

不要在Vue组件中使用双大括号与Blade相关。它们功能上并不等同。相反，将URL作为字符串传递或将其绑定到数据属性。您看到的插值错误是使用花括号并期望它们通过刀片引擎呈现的结果。

您的示例非常简单，因为route（'/'）等同于/。

// this is all you need to hit your defined route.
<a href="/">...</a>

看看这个生成客户端路由和辅助函数的包，以 Laravel 的方式完成。非常方便实用的包，我自己在几个大型项目中也使用过。

https://github.com/aaronlord/laroute

作为旁注，你指的是资源位置resource/assets/js。如果使用构建工具（例如webpack、grunt、gulp等），那么该组件最终将位于您的public目录中，因此它在项目目录中的当前位置并不特别相关。

- user320487

Answer 4

好的，由于以上方法都没有对我起作用，我的解决方案是：

<my-component route="'{{ route('my-route') }}'"></my-component>

(This is an example of passing a route through component's props, but should work the same when used within <a href=...)

对我来说，Vue似乎不知道你正在尝试传递一个string，所以会尝试将您的route作为表达式进行评估。引号告诉Vue您希望这是一个字符串。

另一种解决方案（适用于将几乎所有内容（例如整个对象）传递给Vue的情况）是使用JSON格式对变量进行编码，如下所示：

<my-component route="{{ json_encode(route('my-route')) }}"></my-component>

从 Laravel 5.5 开始，你可以使用 @json Blade 指令来快捷地进行 json_encode：

<my-component route='@json(route('my-route'))'></my-component>

如果Blade因为转义内容而破坏了您的对象数据，您可以使用以下代码进行修复：

<my-component route="{!! json_encode(route('my-route')) !!}"></my-component>

关于JSON及在Blade中转义数据的更多信息，请参见此处。

- Picard