Link

How it works

Create links seem easy but there are several things that you wish to apply. This component will help you with that!

Example

Easy generate normal link, routes link and signed link. Inspired by Vue Router.

This link should be active because it point to top level path doc: Docs link

This link should NOT be active because it point to top level path doc but has prop exact, which mean it should match the exact URL: Docs link with exact prop

This link should be not be active because it point to route name home: Link that point to route name "home"

This link has a signature with prop signed: Signed Route Link

This link has a signature that expire in 120 minutes with prop signed="120": Temporary Signed Route Link

<x-link to="/docs" class="me-3">Docs link</x-link>
<x-link to="/docs" class="me-3" exact>Docs link with exact prop</x-link>
<x-link to="home" class="me-3">Link that point to route name "home"</x-link>
<x-link to="home" signed>Signed Route Link</x-link>
<x-link to="home" signed="120">Temporary Signed Route Link</x-link>

<p>
  This link should be active because it point to top level path <code>doc</code>: <a href="https://demo.laraloop.com/docs"
     aria-current="page"
     class="active me-3">Docs link</a>
</p>

<p>
  This link should NOT be active because it point to top level path <code>doc</code> but has prop <code>exact</code>, which mean it should match the exact URL: <a href="https://demo.laraloop.com/docs"
     class="me-3">Docs link with exact prop</a>
</p>

<p>
  This link should be not be active because it point to route name <code>home</code>: <a href="https://demo.laraloop.com/home"
     class="me-3">Link that point to route name "home"</a>
</p>

<p>
  This link has a signature with prop <code>signed</code>: <a href="https://demo.laraloop.com?signature=1ccca2feb607ce17fa43cb6578fdf9d295215509d12afbf9ff367f6945939e3e"
     class="me-3">Signed Route Link</a>
</p>

<p>
  This link has a signature that expire in 120 minutes with prop <code>signed="120"</code>: <a href="https://demo.laraloop.com?expires=1679485959&amp;signature=632b768f2753a8d2f053e5273ba80022a62de642c62c4955adb3c92cc6ef73b2"
     class="me-3">Temporary Signed Route Link</a>
</p>