如何在 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

可以通过两种方式处理动态数据。

1. 作为 URL 路径变量
2. 作为查询参数
3. 作为浏览器历史记录的参数（一种隐藏机制）

将数据作为 URL 路径变量或查询参数传递给组件

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

如果您想使用参数（一种隐藏机制）通过路由链接将动态数据传递给组件，请尝试此操作。

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

希望这会有所帮助。

或read more on Vue documentation: Dynamic Routing。

Answer 2

请记住，您的刀片视图将始终在客户端上启动 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 从刀片文件硬编码到 routerlink 中。

将您的刀片文件更改为：

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