Rotas

A URL continua sendo uma rota PHP. O nome dessa rota chega no Vue por route(), sem import.

ℹ️Em poucas palavras

<Link :href="route('user.panel')">. O texto entre aspas é o nome registrado no PHP, não o caminho.

O nome no PHP

O contrato é o de Rotas. O handler devolve inertia('Home'). Home é o arquivo pages/Home.vue.

uri::get('/inertia', [inertia_handler::class, 'index'])->name('inertia.welcome');
uri::post('/inertia/ping', [inertia_handler::class, 'ping'])->name('inertia.ping');

A Engine publica route() antes da página. No template e no <script setup> a chamada é direta. Parâmetro preenche o placeholder. O que sobrar vira query string.

route('profile.show', { type: 'char', name: 'Ana' })

O mapa não vai nas props. Ele fica em storage/framework/cache/inertia/routes-{hash}.js e o HTML pede esse arquivo uma vez. Criar ou mudar uma rota troca o hash no próximo carregamento completo, sem npm run build.

Link

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
    <Link :href="route('user.panel')">Meu Painel</Link>
</template>

Link vem de @inertiajs/vue3. A visita segue em SPA: a barra muda e o PHP não redesenha o layout .mucrm.php.

Formulário

<script setup>
import { useForm, usePage } from '@inertiajs/vue3'

const page = usePage()
const form = useForm({
    name: typeof page.props.old?.name === 'string' ? page.props.old.name : '',
})

function submit() {
    form.post(route('inertia.ping'))
}
</script>

<template>
    <form @submit.prevent="submit">
        <input v-model="form.name" />
        <button :disabled="form.processing">Enviar</button>
        <p v-if="form.errors.name">{{ form.errors.name }}</p>
        <p v-if="page.props.flash?.message">{{ page.props.flash.message }}</p>
    </form>
</template>

useForm também vem de @inertiajs/vue3. O campo fica em form.name.form.post, form.put e form.delete usam a URL devolvida por route(). O método HTTP é o do form, não um argumento de route().