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

Question

I'm trying to pass laravel variable in Vuejs router link but it is not working.How i can pass user id in router link?

<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

Keep in mind that your blade views will always be constructed, executed and completed before your Vue application is started on the client, so, just like @Alec Joy mentioned in his comment, it'll be easier to directly add the ID in the link.

Your blade code will end up generating:

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

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

    </li>
</ul>

In this case, the UserId is superfluous, since you are assigning a Javascript variable to be used in one spot. It is better to have, in this case, the User ID hardcoded into the routerlink from the blade file.

Change your blade file to:

<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

Handling dynamic data can be done in two ways.

1. As URL Path variables
2. As Query parameters
3. As Parameters over the browser history ( a hidden mechanism )

Passing data to components as URL path variable or Query Params

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

Try this if you want to have a dynamic data passed to the component over the route link using params (a hidden mechanism).

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

Hope this helps.

Orread more on Vue documentation: Dynamic Routing .