如何将laravel路由参数传递给vue

Question

我是 vue 的新手，我做了很多谷歌，但没有找到任何适合我目前情况的解决方案，所以不知道如何在 vue 组件中传递路由， 有没有办法将这个 laravel 路由传递到 vue 模板中，如下所示。我的 vue 位置是资源/资产/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) 为 resource/assets/js 的 vue 组件

Answer 1

你必须在你的 vue 组件中将它作为一个 prop 传递。 它们是两个不同的步骤。

1. Laravel 吐出编译好的模板

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

在第 2 步，您必须传递一个在第 1 步解析的路线的道具

类似的东西

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

然后在你的组件中

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

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

Answer 2

好的，由于以上都没有真正适合我，我的解决方案是：

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

（这是通过组件的 props 传递 route 的示例，但在 <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>

进一步了解 JSON 和对象 - 如果 Blade 因为转义内容而破坏了您的对象数据，您可以使用以下代码：

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

有关 JSON 和 Blade 中转义数据的更多信息，您可以找到 here。

Answer 3

不要在与 Blade 相关的 Vue 组件中使用双花括号。它们在功能上并不等同。相反，将 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 目录中，因此它在项目目录中的当前位置并不特别相关。

Answer 4

试试

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