Question

我有一个vue js组件，它向laravel路径发出axios请求。但是在vue文件中，我无权访问route()函数，现在必须使用静态url。这是一些代码： web.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

您可以将路线作为道具传递到刀片文件中的组件。

在视图内部：

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

在vue组件内部：

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

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

this.homeRoute

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

希望这会有所帮助。

Answer 2

我发现如何使用带有参数的路由的唯一方法是这样的：

路线：

Route::get('route/{param1}/{param2}', [Controller::class, 'actionName'])->name('routeName');

刀片：

<component :route="'{{ route('routeName', ["", ""]) }}'"></component>

其中数组中空字符串的数量等于路由所需参数的数量。

组件：

<script>
export default {
    props: {
        route: String
    },
    data() {
        return {
            param1: "",
            param2: ""
        }
    },
    computed: {
        fullRoute() {
            return this.route + '/' + this.param1 + '/' + this.param2;
        }
    }
}
</script>

我使用的是 Laravel 8 和 Vue 3。

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

2 个答案: