如何將laravel route參數傳遞給vue

Question

我剛接觸vue＆我做了很多谷歌，但沒有找到任何與我目前的情況相匹配的解決方案所以不知道我怎么能在vue組件中傳遞路線，有沒有辦法將這個laravel路由傳遞到vue模板中下面。 我的vue是位置資源/ assets / 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');
          });

我想將此url傳遞給vue組件，其位置（vue）是resource/assets/js

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

試試吧

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

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目錄中，因此它在項目目錄中的當前位置並不特別相關。

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 ：

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

進一步了解JSON和對象 - 如果Blade因為轉義內容而破壞您的對象數據，您可以使用以下代碼：

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

有關JSON和Blade中的數據轉發的更多信息，請點擊此處 。