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

how to pass laravel route parameter to vue

提问by Rocky

i m new to vue & i does lots of google but have not found any solution which is match to my current situation so don't know how i can pass route in vue component, is there any way to pass this laravel route into vue template as below. my vue is location is resource/assets/js here is code

我是 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>

route(web.php) code

路线（web.php）代码

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

                 Return view('homepage');
          });

i want to pass this url into vue component whose location (vue) is resource/assets/js

我想将此 url 传递到 vue 组件，其位置 (vue) 是 resource/assets/js

回答by tiagojpdias

You have to pass it as a prop inside your vue component. They are two different steps.

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

1. Laravel spits out the compiled template

2. Vue parses the components and initializes them.

1. Laravel 吐出编译好的模板

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

At step 2 you have to pass a prop with the route parsed at step 1

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

Something like this

像这样的东西

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

Then within your component

然后在你的组件中

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

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

回答by Abdulla Nilam

Try with

试试

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

回答by Rocky

Don't use double curly brackets in your Vue components in relation to Blade. They are not functionally equivalent. Instead, pass the url as a string or bind it to a data attribute. The interpolation error you're seeing is a result of using the curly brackets and expecting them to be rendered vie the blade engine.

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

Your example is quite simple as route('/')is equivalent to just /.

您的示例非常简单，route('/')相当于 just /。

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

Take a look at this package for generating client side routes and helpers in the Laravel fashion. Quite a handy package, I might add. I've used it myself in several larger projects.

看看这个用于以 Laravel 方式生成客户端路由和助手的包。相当方便的包，我可能会补充。我自己在几个较大的项目中使用过它。

https://github.com/aaronlord/laroute

https://github.com/aaronlord/laroute

As an aside, you mean the resources location resource/assets/js. Ultimately, that component will be located within your publicdirectory if you use a build tool such as webpack, grunt, gulp, etc. so it's current location within the project directory isn't particularly relevant.

顺便说一句，您的意思是资源位置resource/assets/js。最终，public如果您使用 webpack、grunt、gulp 等构建工具，该组件将位于您的目录中，因此它在项目目录中的当前位置并不是特别相关。

回答by Picard

OK, since none of above really worked for me, my solution is:

好的，由于以上都不对我有用，我的解决方案是：

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

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

（这是一个route通过组件的 props传递的例子，但在 内使用时应该工作相同<a href=...）

For me looks like Vue doesn't know that you're trying to pass a stringso tries to evaluate your routeas an expression. Quotes tell Vue that you want this to be a string.

对我来说，Vue 不知道您正在尝试传递 a，string因此尝试将您的值route作为表达式进行评估。引号告诉 Vue 你希望它是一个字符串。

Another solution, which works for passing almost everything (for instance whole objects) to Vue is encoding your variable using JSON format like:

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

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

Or Laravel 5.5 and up you can use @jsonshortcut Blade directive for json_encode:

或 Laravel 5.5 及更高版本，您可以使用 @json快捷方式 Blade 指令json_encode：

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

Going further about JSON and objects - if Blade destroys your object data because of escaping the content you can use the following code:

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

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

More on JSON and escaping data in Blade you can find here.

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