laravel - 在 Vue JS 组件中使用 Laravel 路由的最佳方式是什么

Question

我有一个 vue js 组件，它向 laravel 路由发出 axios 请求。但是在 vue 文件中，我无法访问 route() 函数，现在必须使用静态 url。这是一些代码:网页.php:

// API
Route::group(['prefix' => 'api'], function() {
    // GET
    Route::get('/brands', 'BrandsController@getBrands')->name('api-get-brands');
    Route::get('/{brand_id}/models', 'BrandsController@getModels')->name('api-get-models');
    Route::get('/fuel-types', 'BrandsController@getFuelTypes')->name('api-get-fuel-types');
    Route::get('/gearboxes', 'BrandsController@getGearboxes')->name('api-get-gearboxes');
});

Vue 组件:

methods: {
            getBrands: function() {
                let app = this
                axios.get('/api/brands')
                    .then(function(response) {
                        app.brands = response.data
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },
            ...

现在可以了，但我想知道这是不是最好的方法，还是有更好的方法

Answer 1

您可以将路由作为 props 传递给 blade 文件中的组件。

View 内部:

<component home-route="{{ route('home') }}"></component>

在vue组件内部:

<script> 
    export default {
        props: ['homeRoute'],
    }
</script>

然后你可以像这样访问组件内部的路由:

this.homeRoute

您可以在此处了解有关 Prop 的更多信息:https://v2.vuejs.org/v2/guide/components-props.html

希望这对您有所帮助。