如何将 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) 为 resource/assets/js

的 vue 组件中

Answer 1

试试

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

Answer 2

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

Laravel spits out the compiled template

Vue parses the components and initializes them.

在第 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 3

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

您的示例非常简单，因为 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

好的，因为上面的 none 真的对我有用，我的解决方案是：

<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。

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

how to pass laravel route parameter to vue

php

laravel

vue.js

laravel-5.3

vuejs2