üç tane yöntemi var. en kötüsünden başlayarak anlatıyorum. dördüncü yöntemi uygula dırdır yapma.
birinci yöntem, herhangi bir get parametresi aldığında nanay. tavsiye edilmez.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <nav class="mt-6"> <ul class="list-disc"> <li><Link href="/" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url === '/'}">Home</Link></li> <li><Link href="/users" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url === '/users'}">Users</Link></li> <li><Link href="/settings" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url === '/settings'}">Settings</Link></li> <li><Link method="post" href="/logout" as="button" :data="{ foo: 'bar'}" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url === '/logout'}">Log Out</Link></li> </ul> </nav> </template> <script> import { Link } from '@inertiajs/vue3'; export default { components: { Link } } </script> |
ikinci yöntem;
1 2 3 4 |
<li><Link href="/" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url.startsWith('/')}">Home</Link></li> <li><Link href="/users" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url.startsWith('/users')}">Users</Link></li> <li><Link href="/settings" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url.startsWith('/settings')}">Settings</Link></li> <li><Link method="post" href="/logout" as="button" :data="{ foo: 'bar'}" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.url.startsWith('/logout')}">Log Out</Link></li> |
üçüncü yöntem direkt component isimleriyle.
1 2 3 |
<li><Link href="/" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.component === 'home'}">Home</Link></li> <li><Link href="/users" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.component ==='users'}">Users</Link></li> <li><Link href="/settings" class="text-blue-500 hover:underline" :class="{'font-bold underline':$page.component ==='settings'}">Settings</Link></li> |
dördüncü yöntem en iyisi. Farklı bir component kullanıyorsun. Nav diye bir componentin olduğunu düşünüyorum. Menu de olabilir ismi her neyse. Burada menü linklerin var.
Menulerin olduğu vue dosyamız şu şekilde.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <nav class="mt-6"> <ul class="list-disc"> <li><NavLink href="/" :active="$page.component ==='home'">Home</NavLink></li> <li><NavLink href="/users" :active="$page.component ==='users'">Users</NavLink></li> <li><NavLink href="/settings" :active="$page.component ==='settings'">Settings</NavLink></li> <li><NavLink href="/logout" :active="$page.component ==='Home'">Log Out</NavLink></li> </ul> </nav> </template> <script> import NavLink from "./NavLink.vue"; export default { components: { NavLink } } </script> |
NavLink dosyamız da şu şekilde.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <Link href="/" class="text-blue-500 hover:underline" :class="{'font-bold underline':active}"><slot /></Link> </template> <script> import { Link } from '@inertiajs/vue3'; export default { components:{Link}, props: { 'active':Boolean } } </script> |