README

Ziggy - 在JavaScript中使用你的Laravel命名路由

Ziggy创建了一个Blade指令，你可以将其包含在视图中。这将导出一个JavaScript对象，其中包含应用程序的命名路由，键为它们的名称（别名），以及一个全局的route()辅助函数，你可以用它来在JavaScript中访问路由。

安装

1. 将Ziggy添加到你的Composer文件中：composer require lexxyungcarter/ziggy

2. (如果使用Laravel 5.4) 将 Lexx\Ziggy\ZiggyServiceProvider::class 添加到你的 config/app.php 文件中的 providers 数组中。

3. 在你的模板中包含我们的Blade指令（@routes），在主应用程序JavaScript加载之前，可能是在头部。

使用方法

此包用所有应用程序路由的集合替换了@routes指令，键为它们的名称。这个集合在Ziggy.namedRoutes中可用。

此包还创建了一个可选的route()JavaScript辅助函数，其功能类似于Laravel的route()PHP辅助函数，可以用来通过名称和（可选）参数检索URL。

示例

无参数

route('posts.index') // Returns '/posts'

有必需参数

route('posts.show', {id: 1}) // Returns '/posts/1'
route('posts.show', [1]) // Returns '/posts/1'
route('posts.show', 1) // Returns '/posts/1'

有多个必需参数

route('events.venues.show', {event: 1, venue: 2}) // Returns '/events/1/venues/2'
route('events.venues.show', [1, 2]) // Returns '/events/1/venues/2'

有查询参数

route('events.venues.show', {event: 1, venue: 2, page: 5, count: 10}) // Returns '/events/1/venues/2?page=5&count=10'

如果传递了整个对象，Ziggy将自动查找id主键

var event = {id: 1, name: 'World Series'};
var venue = {id: 2, name: 'Rogers Centre'};

route('events.venues.show', [event, venue]) // Returns '/events/1/venues/2'

实际的AJAX示例

var post = {id: 1, title: 'Ziggy Stardust'};

return axios.get(route('posts.show', post))
    .then((response) => {
        return response.data;
    });

默认值

请参阅Laravel 文档

默认值在Laravel版本>=5.5.29的情况下自动生效，对于之前的版本，你需要在同一页面的Blade指令（@routes）中设置默认参数。

Ziggy.defaultParameters = {
    //example
    locale: "en"
}

过滤路由

过滤路由是完全可选的。如果你想默认将所有路由传递到JavaScript，你可以继续使用Ziggy，如上所述。

基本白名单和黑名单

为了利用基本白名单或黑名单，你首先需要在Laravel应用的config目录中创建一个名为ziggy.php的标准配置文件，并将whitelist或blacklist设置为一个包含路由名称的数组。

注意：你必须选择一个。同时设置whitelist和blacklist将禁用过滤，并仅返回默认路由列表。

示例 config/ziggy.php

<?php
return [
    // 'whitelist' => ['home', 'api.*'],
    'blacklist' => ['debugbar.*', 'horizon.*', 'admin.*'],
];

如上例所示，Ziggy在过滤器中使用星号作为通配符。只有home会匹配名为home的路由，而api.*会匹配任何以api.开头的路由，例如api.posts.index和api.users.show。

简单的白名单和黑名单宏

白名单和黑名单也可以使用以下宏来实现。

示例白名单

Route::whitelist(function () {
    Route::get('...')->name('posts');
});

Route::whitelist()->get('...')->name('posts');

示例黑名单

Route::blacklist(function () {
    Route::get('...')->name('posts');
});

Route::blacklist()->get('...')->name('posts');

使用组的高级白名单

你也可以选择在config/ziggy.php中定义多个白名单，通过定义groups。

<?php
return [
    'groups' => [
        'admin' => [
            'admin.*',
            'posts.*',
        ],
        'author' => [
            'posts.*',
        ]
    ],
];

在上面的示例中，您可以看到我们已为不同的用户角色配置了多个白名单。您可以通过在blade视图中传递组键到@routes来显式特定的白名单组。示例：

@routes('author')

注意：使用组将始终优先于上述提到的whitelist和blacklist设置。

其他有用的方法

current()

要获取当前路由的名称（基于浏览器的window.location），您可以使用

route().current()
// returns "events.index"

要检查我们是否位于当前路由，请将所需的路由传递到唯一参数中

route().current("events.index")
// returns true

您甚至可以使用通配符

route().current("events.*")
// returns true

url()

Ziggy返回一个字符串原语的包装器，在几乎所有情况下都像字符串一样行为。在第三方库使用严格类型检查的罕见情况下，您可能需要一个实际的String字面量。

要实现这一点，只需在您的路由上调用.url()

route('home').url()
// http://myapp.local/

Artisan命令

Ziggy发布了一个artisan命令来生成ziggy.js路由文件，这可以作为资产管道（如Laravel Mix）的一部分使用。

您可以在项目中运行php artisan ziggy:generate以生成位于resources/assets/js/ziggy.js中的静态路由文件。

可选地，包含第二个参数以覆盖路径和文件名（您必须传递包含路径的文件名）

php artisan ziggy:generate "resources/foo.js"

示例ziggy.js，其中命名路由home和login存在于routes/web.php中

// routes/web.php

<?php

Route::get('/', function () {
    return view('welcome');
})->name('home');

Route::get('/login', function () {
    return view('login');
})->name('login');

// ziggy.js

var Ziggy = {
    namedRoutes: {"home":{"uri":"\/","methods":["GET","HEAD"],"domain":null},"login":{"uri":"login","methods":["GET","HEAD"],"domain":null}},
    baseUrl: 'http://myapp.local/',
    baseProtocol: 'http',
    baseDomain: 'myapp.local',
    basePort: false
};

export {
    Ziggy
}

导入route()助手和生成的ziggy.js

// webpack.mix.js
const path = require('path')
...
mix.webpackConfig({
    resolve: {
        alias: {
            ...
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
        },
    },
})

// app.js

import route from 'ziggy'
import { Ziggy } from './ziggy'

...

与Vue一起使用

组件

如果您想在Vue组件中使用route()助手，如上所示导入助手和生成的ziggy.js。然后您需要将其添加到您的app.js文件中

// app.js
import route from 'ziggy'
import { Ziggy } from './ziggy'

Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    }
});

然后，在您的Vue组件中如此使用该方法

<a class="nav-link" :href="route('home')">首页</a>

感谢Archer70提供的解决方案。

与Vue-Router一起使用

由于vue router只接受相对URL，因此存在一个relative()方法，该方法返回从正常绝对URL（由route()方法获取）生成的相对URL。因此，您可以简单地链接它。

注意 作为预防措施，当使用route()生成URL时，冒号会被编码为%3A，所以将true传递给relative方法是个好主意。在幕后，decodeURIComponent被调用并确保冒号被返回。

// routes.js

// (Similar to Laravel's route('users/{username}'))
route('users.show', ':username').relative(true)
//              /users/:username         => relative(true)
//              /users/%3Ausername       => relative()

// (Similar to Laravel's route('users/{id}/edit'))
route('users.show', ':id').relative(true)
//              /users/:id         => relative(true)
//              /users/%3Aid       => relative()


var routes = [

    { path: route('users.index').relative(true), component: UsersIndex },

    // other routes
]

export const routes;



// users/Index.vue    component
export default {

    methods: {
        view(user)
        {
            // no need to pass true in relative()
            return this.$router.push(route('users.show', user.username).relative());
        },
    }
}

与laravel-haml（和其他自定义Blade编译器）一起使用

基于环境的加载最小化路由助手文件

在加载blade助手文件时，Ziggy将检测当前环境，并在APP_ENV不是local时最小化输出。

在这种情况下，将加载ziggy.min.js。否则，将使用ziggy.js。

可选的route助手

如果您只想通过@routes访问路由，但不需要route助手函数，您可以在配置中包含skip-route-function并将其设置为true

// config/ziggy.php

<?php

return [
    'skip-route-function' => true
];

贡献与致谢

要开始为Ziggy做贡献，请查看贡献指南。

• Lexx YungCarter
• Daniel Coulbourne
• Matt Stauffer

感谢Caleb Porzio、Adam Wathan和Jeffrey Way在巩固想法方面的帮助。

感谢所有我们的贡献者（点击查看）