README

Momentum Trail 是一个 Laravel 包，它提供了一个 TypeScript route() 辅助函数，类似于 Laravel 的，使得在 TypeScript 中使用 Laravel 命名路由变得简单，具有自动完成和类型安全。

该包建立在 Ziggy 之上。

安装
- Laravel
- 前端
用法
自动生成
高级 Inertia
Momentum

安装

Laravel

使用 composer 安装包。

composer require based/momentum-trail

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag=trail-config

这是已发布配置文件的内容

return [
    'output' => [
        'routes' => resource_path('scripts/routes/routes.json'),
        'typescript' => resource_path('scripts/types/routes.d.ts'),
    ],
];

根据您的目录结构设置路径。如果您计划使用 Blade 指令而不是导入 JSON，可以将 routes 路径设置为 null。

前端

安装前端包。

npm i momentum-trail
# or
yarn add momentum-trail

用法

运行以下命令以生成 TypeScript 声明，并使路由在前端可用。

php artisan trail:generate

在前端注册您的路由。您可以选择导入生成的 JSON 定义并将其传递给入口点（app.ts）中的 defineRoutes 方法，或者使用 @trail Blade 指令在 window 对象中注册路由并使它们全局可用。

import { defineRoutes } from "momentum-trail"
import routes from "./routes.json"

defineRoutes(routes)

Vue 3

或者，您可以使用 Vue 3 插件来注册路由。

import { trail } from "momentum-trail"
import routes from "./routes.json"

createInertiaApp({
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(trail, { routes })
  }
})

服务器端渲染

SSR 引擎 不知道 您请求的当前 URL。

为了使 current 方法在初始页面加载时正确工作，您必须将初始 URL 传递给选项列表。

createServer((page: Page) =>
  createInertiaApp({
    setup({ App, props, plugin }) {
      return createSSRApp({ render: () => h(App, props) })
        .use(trail, {
          routes,
          url: props.initialPage.url
        })
    },
  })
)

Blade

可选地，将 @trail Blade 指令添加到您的主布局（在应用程序的 JavaScript 之前）。

默认情况下，@trail Blade 指令的输出包括应用程序中所有路由及其参数的列表。此路由列表包含在页面的 HTML 中，并且可以被最终用户查看。

<html>
<head>
  @trail
</head>
</html>

在您的 .vue 文件中导入辅助函数，并享受对 route 和 current 方法的完美自动完成和类型安全。

<script lang="ts" setup>
import { route, current } from "momentum-trail"

const submit = () => form.put(route("profile.settings.update"))
</script>

<template>
  <a
    :class="[current('users.*') ? 'text-black' : 'text-gray-600']"
    :href="route('users.index')">
    Users
  </a>
</template>

route 辅助函数的工作方式与 Laravel 的类似——您可以将其中一个路由的名称和要传递给路由的参数传递给它，然后它将返回一个 URL。

// Generate a URL
route("jobs.index")
route("jobs.show", 1)
route("jobs.show", [1])
route("jobs.show", { job: 1 })

// Check the current route
current("jobs.*")
current("jobs.show")
current("jobs.show", 1)

有关完整文档，请参阅 Ziggy。

自动生成

该包与 vite-plugin-watch 插件配合使用效果最佳。您可以将监视器设置为在每次文件更改时运行命令。

import { defineConfig } from "vite"
import { watch } from "vite-plugin-watch"

export default defineConfig({
  plugins: [
    watch({
      pattern: "routes/*.php",
      command: "php artisan trail:generate",
    }),
  ],
})

高级 Inertia

通过我的书 Advanced Inertia 将您的 Inertia.js 技能提升到下一个层次。学习高级概念，并用 Laravel 和 Inertia.js 开发应用程序变得简单易行。

Momentum

Momentum 是一组旨在提高您构建 Inertia 应用程序体验的包。

Modal — 为 Inertia 应用程序构建动态模态对话框
Preflight — 为 Inertia 应用程序提供实时后端驱动的验证
Paginator — Laravel 分页的无头包装器
Trail — 使用 Inertia 与 Laravel 路由的前端包
Lock — 使用 Inertia 与 Laravel 权限的前端包
Layout — Vue 3 应用的持久化布局
Vite Plugin Watch — 文件更改时运行 shell 命令的 Vite 插件

致谢

许可协议

MIT 许可协议 (MIT)。请参阅许可文件获取更多信息。

基于 / momentum-trail

维护者

详细信息