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

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

Asked 11 months ago
0
2 answers

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"

Source: link

0

Route <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>
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>
<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>
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>
<span class="token keyword">var</span> routes <span class="token operator">=</span> window <span class="token punctuation">.</span> Laravel <span class="token punctuation">.</span> routes module <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>
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 <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>
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>

Source: link

Recent Questions on laravel

    Programming Languages