README

AdminUI - Inertia Routes

本包旨在补充希望在其JavaScript中使用命名路由但不希望每次API请求都加载路由的Laravel/Inertia/Vue3应用。

还提供了一个Vue插件，该插件提供了一种composable函数来解析路由名称，以及一个全局属性

安装

composer require adminui/inertia-routes

vite.config.js

将以下设置添加到您的配置中

import { resolve } from "node:path";
import { defineConfig } from "vite";

export default defineConfig({
    resolve: {
        alias: {
            inertiaRoutes: resolve("vendor/adminui/inertia-routes"),
        },
    },
});

app.js

import { useInertiaRoutes } from "inertiaRoutes";

setup({ el, App, props, plugin }) {
    const inertiaRoutesPlugin = useInertiaRoutes(props);

    createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(inertiaRoutesPlugin)
        .mount(el);
}

ssr.js

import { useInertiaRoutes } from "inertiaRoutes";

setup({ app, props, plugin }) {
    const inertiaRoutesPlugin = useInertiaRoutes(props);

    return createSSRApp({
        render: () => h(app, props),
    })
        .use(plugin)
        .use(inertiaRoutesPlugin);
}

使用方法

组合式API

import { useRoute } from "inertiaRoutes";
const route = useRoute();


console.log(route("home"));

选项式API

export default {
	data() {
		return {};
	},
	computed: {
		homeUrl() {
			return this.$route("home");
		},
	},
};

模板

<inertia-link :href="$route('home')">Home Page</inertia-link>

Vuetify 3 插件

该包还提供了一个适用于基于Vuetify 3的项目的新插件。此插件使任何适用组件的to参数支持Inertia Routes

使用方法

<template>
	<v-btn to="pages.about-us">About Us</v-btn>
</template>

或者，如果您需要传递路由参数，请发送一个元组

<template>
	<v-btn :to="['pages.case-studies', { study: 42 }]"> Read this Case Study </v-btn>
</template>

安装

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { useInertiaRoutes, vuetifyRoutesPlugin } from "inertiaRoutes";
import { createVuetify } from "vuetify";

const vuetify = createVuetify();

createInertiaApp({
	resolve: (name) => {
		const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
		return pages[`./Pages/${name}.vue`];
	},
	setup({ el, App, props, plugin }) {
		const inertiaRoutesPlugin = useInertiaRoutes(props);

		createApp({ render: () => h(App, props) })
			.use(plugin)
			.use(vuetify)
			.use(inertiaRoutesPlugin)
			.use(vuetifyRoutesPlugin)
			.mount(el);
	},
});

配置

您可以通过在命令行中运行php artisan v:p --tag=inertia-routes来发布您的配置文件

这将发布一个位于/config/inertia-routes.php的文件，在那里您可以覆盖默认选项。有关以下配置选项的完整详细信息和示例，请参阅该文件。

请注意，在同一个配置块中定义except和only会导致不应用任何路由过滤

有关格式化您的group、only和except选项的详细信息，请参阅Ziggy文档

更改配置

Inertia Routes提供了一个门面，用于更改在生成路由时将使用的配置块

\AdminUI\InertiaRoutes\Facades\InertiaRoutes::setConfig('admin');

您可以在Inertia共享编译之前调用此函数任何时间，但从您的Inertia中间件的构造函数中调用可能是个好地方。

它的工作原理

从您的Laravel后端将命名路由集成到前端JS框架中通常都有自己的优点和缺点

1. @routes blade指令：必须将整个Ziggy JS库作为HTML文档的一部分下载，作为每次完整页面加载的一部分。也不兼容SSR，因为它依赖于从window对象访问方法。
2. ziggy:generate 路由文件：需要在任何路由或环境更改时重新生成（因为根URL被硬编码到.js文件中）
3. API路由调用：可能很难设置以与开发、生产环境和SSR环境一起使用。还带有等待单独的Ajax请求完成才能渲染应用程序的开销。
4. Inertia::share 路由对象：这是一个不错的选择，但有一个缺点——路由作为每个Inertia请求（初始或导航）的一部分发送下去。

这个库所做的就是调整选项4，并添加额外功能。该包检测到它是初始的全页Inertia请求，然后发送Ziggy路由对象。在后续的导航中，不再发送路由。相反，您的应用程序保留并使用第一次请求中的路由。

额外的配置选项还允许您设置仅影响前端 Ziggy 路由的 group、only 和 except 选项。如果您有运行在后台和前端上的独立 Inertia 应用程序，并且希望只包含部分总路由，这将非常有用。

AdminUI 是 evoMark 的产品。