README

关于

Laravel 5包，允许您通过laravel-route-to-vuejs将Laravel路由与Laravel路由分享给vue前端。

Laravel 5.7注意事项！

Laravel 5.7中的配置路径已更改，为了使此包正常工作，您需要在config\laravel-route-to-vue-generator.php中配置jsFile的正确路径。

安装包

在您的项目中

composer require tandd/laravel-route-to-vuejs --dev

对于Laravel 5.4及以下版本

对于框架的旧版本

在`config/app.php中注册服务提供者

TanDD\LaravelRouteToVueJS\VueJSRouteGeneratorProvider::class,

接下来，发布包的默认配置

php artisan vendor:publish --provider="TanDD\LaravelRouteToVueJS\VueJSRouteGeneratorProvider"

忽略路由

从版本4.0.0开始，您可以在laravel-route-to-vue-generator.php文件中设置要忽略的路由

您可以将路由或路由的前缀添加到ignoreRoute数组中

例如

.
.
'ignoreRoute' => [
                    'name'   => [
                        'ignition',
                    ],
                    'prefix' => [
                        null,
                        '_debugbar',
                        'sanctum',
                        '_ignition',
                    ],
                ],
.
.

忽略输出字段

从版本4.0.0开始，您可以在输出文件中设置要忽略的字段。可以跳过导出到输出文件的列表包括：['domain','prefix','method','action']

您可以将它们添加到ignoreFields中，以忽略字段

配置示例

'ignoreFields'       => [
                            'domain',
                            'prefix',
                            'method',
                            'action',
                        ],

在VueJS3中使用laravel-route-to-vuejs

使用以下命令生成包含文件

php artisan laravel-route-to-vue:generate

然后在Vue主.js文件中定义

import {createApp} from 'vue'
import App from './App.vue'
import LaravelRoute from '@/plugins/laravel-route-to-vue'; //Path to the index file

const app = createApp(App);
app.use(LaravelRoute).mount('#app')

在插件中使用

import {routeApi} from "@/plugins/laravel-route-to-vue/laravel-routes.generated"; //Path to the generated directiory

console.log(routeApi('route.name'))

在模板中使用

Vue模板

<div class="age">
    <p>{{ proxy.routeApi('route.name') }}</p>
</div>

<script setup>
    import {getCurrentInstance} from "vue";
    const {proxy} = getCurrentInstance();
</script>

带有参数的Vue模板

<div class="age">
    <p>{{ proxy.routeApi('route.name',{param1:value, param2:value}) }}</p>
</div>

<script setup>
    import {getCurrentInstance} from "vue";
    const {proxy} = getCurrentInstance();
</script>

Vue脚本

<script setup>
    import {getCurrentInstance} from "vue";
    const {proxy} = getCurrentInstance();
    
    console.log(proxy.routeApi('route.name', {param1: value, param2: value}))
</script>

在VueJS中使用laravel-route-to-vuejs

使用以下命令生成包含文件

php artisan laravel-route-to-vue:generate

然后在Vue主.js文件中定义

import Vue from 'vue';

import LaravelRoutes from './laravel-route-to-vue.generated';

Vue.use(LaravelRoutes)

在模板中使用

Blade模板

<div class="age">
    <p>{{ route('route.name') }}</p>
</div>

带参数

<div class="age">
    <p>{{ route('route.name',['name'=>value]) }}</p>
</div>

Vue模板

<div class="age">
    <p>{{ route('route.name') }}</p>
</div>

带有参数的Vue模板

<div class="age">
    <p>{{ route('route.name',{param1:value, param2:value}) }}</p>
</div>

Vue脚本

console.log(this.route('route.name', {param1: value, param2: value}))

许可证

根据MIT

认证

Tandd