如何在vuejs路由器鏈接中傳遞laravel變量？

Question

我正在嘗試在 Vuejs 路由器鏈接中傳遞 laravel 變量，但它不起作用。我如何在路由器鏈接中傳遞用戶 ID？

<ul>

    @foreach($children as $child)

        <li>
            @if($child->user_type == 'user')

                <script>
                    var UserId = '{{ $child->id }}';
                </script>

                <router-link :to='"/dashboard/" + UserId' class="nav-link-text mb-1">
               {{ $child->user_name}}</router-link>

            @endif

        </li>

    @endforeach

</ul>

Answer 1

請記住，您的刀片視圖始終會在您的 Vue 應用程序在客戶端啟動之前構建、執行和完成，因此，就像@Alec Joy在他的評論中提到的那樣，直接在鏈接中添加 ID 會更容易.

您的刀片代碼最終將生成：

<ul>
    <li>
        <script>
            var UserId = '1';
        </script>

        <router-link :to='"/dashboard/" + UserId' class="nav-link-text mb-1">Bob</router-link>

    </li>
</ul>

在這種情況下，UserId 是多余的，因為您正在分配一個要在一個地方使用的 Javascript 變量。 在這種情況下，最好將用戶 ID 從刀片文件硬編碼到路由器鏈接中。

將您的刀片文件更改為：

<ul>
@foreach($children as $child)
    <li>
    @if($child->user_type == 'user')
        <router-link :to="/dashboard/{{ $child->id }}" class="nav-link-text mb-1">{{ $child->user_name}}</router-link>
    @endif
    </li>
@endforeach
</ul>

Answer 2

可以通過兩種方式處理動態數據。

1. 作為 URL 路徑變量
2. 作為查詢參數
3. 作為瀏覽器歷史記錄中的參數（一種隱藏機制）

將數據作為 URL 路徑變量或查詢參數傳遞給組件

https://techformist.com/url-params-vue/

如果您希望使用 params（一種隱藏機制）通過路由鏈接將動態數據傳遞給組件，請嘗試此操作。

https://dev.to/aligoren/passing-data-to-a-router-link-in-vuejs-2cb0

希望這可以幫助。

或者閱讀更多關於 Vue 文檔的信息：動態路由。