wayfinder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Wayfinder

Instructions

使用说明

Wayfinder generates TypeScript functions and types for Laravel controllers and routes which you can import into your client side code. It provides type safety and automatic synchronization between backend routes and frontend code.

Wayfinder可为Laravel控制器和路由生成TypeScript函数与类型，你可以将其导入到客户端代码中。它提供类型安全性，实现后端路由与前端代码的自动同步。

Development Guidelines

开发指南

Always Prefer named imports for tree-shaking (e.g.,
```
import { show } from '@/actions/...'
```
)
Avoid default controller imports (prevents tree-shaking)
Run
```
php artisan wayfinder:generate
```
after route changes if there are any errors

优先使用命名导入以支持tree-shaking（例如：
```
import { show } from '@/actions/...'
```
）
避免默认控制器导入（会阻碍tree-shaking）
若路由变更后出现错误，请运行
```
php artisan wayfinder:generate
```

Feature Overview

功能概述

Form Support: Use

.form()

with

--with-form

flag for HTML form attributes —

<form {...store.form()}>

→

action="/posts" method="post"

HTTP Methods: Call

.get()

.post()

.patch()

.put()

.delete()

for specific methods —

show.head(1)

→

{ url: "/posts/1", method: "head" }

Invokable Controllers: Import and invoke directly as functions. For example,
```
import StorePost from '@/actions/.../StorePostController'; StorePost()
```
Named Routes: Import from
```
@/routes/
```
for non-controller routes. For example,
```
import { show } from '@/routes/post'; show(1)
```
for route name
```
post.show
```
Parameter Binding: Detects route keys (e.g.,
```
{post:slug}
```
) and accepts matching object properties —
```
show("my-post")
```
or
```
show({ slug: "my-post" })
```

Query Merging: Use

mergeQuery

to merge with

window.location.search

, set values to

null

to remove —

show(1, { mergeQuery: { page: 2, sort: null } })

Query Parameters: Pass

{ query: {...} }

in options to append params —

show(1, { query: { page: 1 } })

→

"/posts/1?page=1"

Route Objects: Functions return

{ url, method }

shaped objects —

show(1)

→

{ url: "/posts/1", method: "get" }

URL Extraction: Use
```
.url()
```
to get URL string —
```
show.url(1)
```
→
```
"/posts/1"
```

表单支持：结合

.form()

与

--with-form

标志生成HTML表单属性——

<form {...store.form()}>

会转换为

action="/posts" method="post"

HTTP方法：调用

.get()

、

.post()

、

.patch()

、

.put()

、

.delete()

来指定请求方法——

show.head(1)

会返回

{ url: "/posts/1", method: "head" }

可调用控制器：直接导入并作为函数调用。例如：

import StorePost from '@/actions/.../StorePostController'; StorePost()

命名路由：从
```
@/routes/
```
导入非控制器路由。例如，对于路由名称
```
post.show
```
，使用
```
import { show } from '@/routes/post'; show(1)
```
参数绑定：自动识别路由参数（如
```
{post:slug}
```
），接受匹配的对象属性——
```
show("my-post")
```
或
```
show({ slug: "my-post" })
```

查询参数合并：使用

mergeQuery

与

window.location.search

合并参数，设置值为

null

可移除参数——

show(1, { mergeQuery: { page: 2, sort: null } })

查询参数传递：在选项中传入
```
{ query: {...} }
```
来追加参数——
```
show(1, { query: { page: 1 } })
```
会生成
```
"/posts/1?page=1"
```

路由对象：函数返回

{ url, method }

格式的对象——

show(1)

{ url: "/posts/1", method: "get" }

URL提取：使用
```
.url()
```
获取URL字符串——
```
show.url(1)
```
返回
```
"/posts/1"
```

Examples

示例

<code-snippet name="Wayfinder Basic Usage" lang="typescript"> // Import controller methods (tree-shakable) import { show, store, update } from '@/actions/App/Http/Controllers/PostController'

// Get route object with URL and method...
show(1) // { url: "/posts/1", method: "get" }

// Get just the URL...
show.url(1) // "/posts/1"

// Use specific HTTP methods...
show.get(1) // { url: "/posts/1", method: "get" }
show.head(1) // { url: "/posts/1", method: "head" }

// Import named routes...
import { show as postShow } from '@/routes/post' // For route name 'post.show'
postShow(1) // { url: "/posts/1", method: "get" }

</code-snippet>

<code-snippet name="Wayfinder Basic Usage" lang="typescript"> // Import controller methods (tree-shakable) import { show, store, update } from '@/actions/App/Http/Controllers/PostController'

// Get route object with URL and method...
show(1) // { url: "/posts/1", method: "get" }

// Get just the URL...
show.url(1) // "/posts/1"

// Use specific HTTP methods...
show.get(1) // { url: "/posts/1", method: "get" }
show.head(1) // { url: "/posts/1", method: "head" }

// Import named routes...
import { show as postShow } from '@/routes/post' // For route name 'post.show'
postShow(1) // { url: "/posts/1", method: "get" }

</code-snippet>

Wayfinder + Inertia

If your application uses the

<Form>

component from Inertia, you can use Wayfinder to generate form action and method automatically. <code-snippet name="Wayfinder Form Component (React)" lang="typescript">

如果你的应用使用Inertia的

<Form>

组件，可通过Wayfinder自动生成表单的action与method属性。 <code-snippet name="Wayfinder Form Component (React)" lang="typescript">