CODEWITHSUNDEEP
phplaravelvue.jsvuejs2laravel-5.3
Rocky
Rocky

Reputation: 431

how to pass laravel route parameter to vue

i m new to vue & i does lots of google but have not found any solution which is match to my current situation so don't know how i can pass route in vue component, is there any way to pass this laravel route into vue template as below. my vue is location is resource/assets/js here is code 

               <template>
                   <a href={{route('/')}}></a>//i want to pass laravel route 
                                               //to view component this line 
                                                //throw error
               </template>

route(web.php) code

        Route::get('/' , function(){

                 Return view('homepage');
          });

i want to pass this url into vue component whose location (vue) is resource/assets/js

Upvotes: 3

Views: 16071

Answers (4)

tiagojpdias
tiagojpdias

Reputation: 458

You have to pass it as a prop inside your vue component. They are two different steps.

  1. Laravel spits out the compiled template

  2. Vue parses the components and initializes them.

At step 2 you have to pass a prop with the route parsed at step 1

Something like this

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

Then within your component

<template>
    <a :href="route">CLICK HERE</a>
</template>

<script>
...
props: {
    route: { type: String, required: true }
}
...
</script>

Upvotes: 14

Picard
Picard

Reputation: 4112

OK, since none of above really worked for me, my solution is:

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

(This is an example of passing a route through component's props, but should work the same when used within <a href=...)

For me looks like Vue doesn't know that you're trying to pass a string so tries to evaluate your route as an expression. Quotes tell Vue that you want this to be a string.

Another solution, which works for passing almost everything (for instance whole objects) to Vue is encoding your variable using JSON format like:

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

Or Laravel 5.5 and up you can use @json shortcut Blade directive for json_encode:

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

Going further about JSON and objects - if Blade destroys your object data because of escaping the content you can use the following code:

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

More on JSON and escaping data in Blade you can find here.

Upvotes: 1

user320487
user320487

Reputation:

Don't use double curly brackets in your Vue components in relation to Blade. They are not functionally equivalent. Instead, pass the url as a string or bind it to a data attribute. The interpolation error you're seeing is a result of using the curly brackets and expecting them to be rendered vie the blade engine.

Your example is quite simple as route('/') is equivalent to just /.

// this is all you need to hit your defined route.
<a href="/">...</a>

Take a look at this package for generating client side routes and helpers in the Laravel fashion. Quite a handy package, I might add. I've used it myself in several larger projects.

https://github.com/aaronlord/laroute

As an aside, you mean the resources location resource/assets/js. Ultimately, that component will be located within your public directory if you use a build tool such as webpack, grunt, gulp, etc. so it's current location within the project directory isn't particularly relevant.

Upvotes: 1

Abdulla Nilam
Abdulla Nilam

Reputation: 38662

Try with

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

Upvotes: 4

Related Questions