Passing Laravel route to vue component's Href or router-link

Question

Write an answer

How to pass in a react component into another react component to transclude the first component's content?

Navigate to sibling Routes's Route without page reload in React router 6

Reactjs router exact doesn't work and override other route components to current route

React Router 6 - How to pass components to Route-path with conditional logic

How to mix Laravel Routing with Vue routing?

vue-router : how to remove underline from router-link

How to pass an object as props with Vue Router with Vue 3?

'does not provide an export named 'createRouter'' vue 3, vite and vue-router

How to avoid re-initializing component when multiple linked routes use same component

Add children Route's in a component React

What's the most idomatic Vue way of handling this higher-order component?

Combining Laravel + Vue.js I got Error: "Module not found: Error: Can't resolve './vue/app'"

Vue Router switch rendered Component

Load a component on passing id through link

How to use vue.js component in laravel blade?

href tag breaks vue template component

Routes component from react-router-dom not found

Laravel: pass field to resolveRouteBinding from route definition

Vue Router - Change anchor in route on scroll

Mostafa Said · Answer 1

Okay i solved it and it was pretty simple!

I simply added to data() the below code

categoryRoute: "/categories/",

Then adjusted the href like so

:href="this.categoryRoute + category.slug"

ProgrammerAnswered 1 years ago · Answer 2

Route : : get ( '/{any}' , function ( ) { return view ( 'app' ) ; } ) - > where ( 'any' , '.*' ) ;

1234Route <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/{any}'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">view</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'app'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">where</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'any'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'.*'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

< div id = "app" > < / div > < script > window . Laravel = { ! ! json_encode ( [ 'csrfToken' = > csrf_token ( ) , 'baseUrl' = > url ( '/' ) , 'routes' = > collect ( Route : : getRoutes ( ) ) - > mapWithKeys ( function ( $route ) { return [ $route - > getName ( ) = > $route - > uri ( ) ] ; } ) ] ) ! ! } ; < / script > < script src = "{{ asset('js/app.js') }}" > < / script >

1234567891011<span class="token operator"><</span> div id <span class="token operator">=</span> <span class="token double-quoted-string string">"app"</span> <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> script <span class="token operator">></span>    window <span class="token punctuation">.</span> Laravel <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token function">json_encode</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>        <span class="token single-quoted-string string">'csrfToken'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token function">csrf_token</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>        <span class="token single-quoted-string string">'baseUrl'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token function">url</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>        <span class="token single-quoted-string string">'routes'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token function">collect</span> <span class="token punctuation">(</span>  <span class="token package">Route</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">getRoutes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">mapWithKeys</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token variable">$route</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token variable">$route</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token variable">$route</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">uri</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span>    <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span><span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span><span class="token operator"><</span> script src <span class="token operator">=</span> <span class="token double-quoted-string string">"{{ asset('js/app.js') }}"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span>

1234567891011121314<span class="token keyword">var</span> routes <span class="token operator">=</span> window <span class="token punctuation">.</span> Laravel <span class="token punctuation">.</span> routesmodule <span class="token punctuation">.</span> <span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">var</span> args <span class="token operator">=</span> Array <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> slice <span class="token punctuation">.</span> <span class="token function">call</span> <span class="token punctuation">(</span> arguments <span class="token punctuation">)</span> <span class="token punctuation">;</span>    <span class="token keyword">var</span> name <span class="token operator">=</span> args <span class="token punctuation">.</span> <span class="token function">shift</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>    <span class="token keyword">if</span> <span class="token punctuation">(</span> routes <span class="token punctuation">[</span> name <span class="token punctuation">]</span> <span class="token operator">===</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">{</span>        console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> <span class="token string">'Route not found '</span> <span class="token punctuation">,</span> name <span class="token punctuation">)</span> <span class="token punctuation">;</span>    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>        <span class="token keyword">return</span> window <span class="token punctuation">.</span> Laravel <span class="token punctuation">.</span> baseUrl <span class="token operator">+</span> <span class="token string">'/'</span> <span class="token operator">+</span> routes <span class="token punctuation">[</span> name <span class="token punctuation">]</span>            <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span>            <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> s <span class="token operator">=></span> s <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">'{'</span> <span class="token operator">?</span> args <span class="token punctuation">.</span> <span class="token function">shift</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> s <span class="token punctuation">)</span>            <span class="token punctuation">.</span> <span class="token function">join</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>    <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">;</span>

.map(s => s[0] == '{' ? args.shift() : s) .join('/');

123 .map(s => s[0] == '{' ? args.shift() : s) .join('/');

window . route = require ( './route' ) ;

12window <span class="token punctuation">.</span> route <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./route'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

Passing Laravel route to vue component's Href or router-link

Write an answer

Recent Questions on laravel

Programming Languages

Passing Laravel route to vue component's Href or router-link

Write an answer

Questions related to 'Passing Laravel route to vue component's Href or router-link'

Recent Questions on laravel

Programming Languages