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从刀片文件硬编码到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>

Answer 2

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

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

将数据作为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。

如何在vuejs路由器链接中传递laravel变量？

2 个答案: