<router-link>
This built-in component can be used to replace anchor tags to navigate from a hybrid view to another.
This component is a wrapper around Vue's <Component>
. By default, it creates anchors elements but intercepts their click handlers to make hybrid navigations.
href
- Required: true
- Type:
string
Similar to the <a>
tag, accepts the hyperlink to navigate to. If this doesn't point to a hybrid view, set the external
property to true
.
Usage
<template>
<router-link :href="route('index')">
Home
</router-link>
</template>
external
- Type: boolean
When set to true
, disables the custom click handler. This must be used when navigating to external websites or non-hybrid views — otherwise, a hybrid request will be made and will result into an error.
Usage
<template>
<router-link
v-for="link in navigation"
:key="link.url"
:href="link.url"
:external="link.external"
v-text="link.label"
/>
</template>
as
- Type:
string
orComponent
Defines the tag or component to render as.
Usage
<script setup lang="ts">
import BaseButton from '@/views/components/base-button.vue'
</script>
<template>
<router-link
:as="BaseButton"
method="POST"
:href="route('chirps.delete')"
>
Delete
</router-link>
</template>
method
- Type:
GET
,POST
,PUT
,PATCH
orDELETE
Defines the method that will be used when making the hybrid request. May be lowercase or uppercase.
data
- Type: object
Optional data to be sent with the hybrid request. This is the same as using data
in a programmatic navigation.
options
- Type:
HybridRequestOptions
Options for the hybrid request. This is the same as the options
argument in programmatic navigations.
disabled
- Type: boolean
When set to true
, the click handler will not be triggered and the disabled
HTML attribute will be added.
preload
- Type:
boolean | 'mount' | 'hover'
When set to true
, the URL will be preloaded when hovering over the link. When set to mount
, the preloading will be done when the link component is mounted.
Read more on preloading.