Question

我是vue＆amp;我做了很多谷歌，但没有找到任何与我目前的情况相匹配的解决方案，所以不知道我怎么能在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）代码

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

                 Return view('homepage');
          });

我想将此网址传递到vue组件，其位置（vue）为resource/assets/js

Answer 1

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

Laravel吐出已编译的模板



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

尝试

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

Answer 3

在与Vue相关的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

好吧，由于以上内容都不适合我，我的解决方法是：

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

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

对我来说，Vue似乎不知道您要传递string，因此尝试将route评估为表达式。引号告诉Vue，您希望它是一个字符串。

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

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

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

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

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

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

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

如何将laravel route参数传递给vue

4 个答案: