如何在Vue JS组件中最佳使用Laravel路由

Question

我有一个Vue.js组件，它通过Axios请求Laravel路由。但是在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)
                    })
            },
            ...

现在它可以工作了，但我想知道这是否是最好的方法，或者有更好的方法可以做到这一点。

- Angel Miladinov

---

我使用这个包并将其赋值给window变量，取得了相当不错的成功。 - Ohgodwhy

@Ohgodwhy 那个包看起来不错。我猜你需要每次更改路由时运行 php artisan laroute:generate？ - ljubadr

@ljubadr 是的，基本上就是这样。那真的是我唯一的抱怨。 - Ohgodwhy

@Ohgodwhy 谢谢！我猜应该可以设置某种观察者来运行命令 :) 我想这个链接会很有用 在Linux中，如何在文件或目录更改时运行shell脚本 - ljubadr

@ljubadr 我也曾经走过这条路。我建议使用这个包来监视你的routes目录的更改。在监听器的回调中，你可以运行Artisan::call('laroute:generate')来重新生成路由文件。然后你可以运行npm run watch或npm run hot，它将自动重新编译你的JS，包括新的路由，只要你在你的javascript中的某个地方做了类似于require('routes.js)的事情。 - Ohgodwhy

@Ohgodwhy - 哇，这太棒了，非常感谢！我会好好利用它的 :) 干杯！ - ljubadr

Answer 1

你可以将路由作为属性传递给 Blade 文件中的组件。

在视图中：

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

在Vue组件内部：

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

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

this.homeRoute

你可以在这里了解更多关于props的内容：https://v2.vuejs.org/v2/guide/components-props.html

希望这可以帮到你。

- Codearts

---

但如果我想使用需要参数的路由呢？ - Nur Uddin

@john <component home-route="{{ route('home', $parameters) }}"></component> - Samuel Aiala Ferreira

@SamuelAialaFerreira 如果参数需要从Vue应用程序传递怎么办？ - Yerke

@Yerke，很遗憾我不知道你的意思 :( - Samuel Aiala Ferreira

他们的意思是，“如果$parameters变量需要来自Vue应用程序，并且在页面首次加载时未知呢？” - floodlitworld

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。

- kristytoman

Answer 3

使用https://github.com/tighten/ziggy

Ziggy提供了一个JavaScript的route()辅助函数，它的工作方式类似于Laravel，可以轻松地在JavaScript中使用Laravel命名路由。

然后您就可以像在PHP中一样在JS中使用路由了。

route('posts.index');

带参数的

route('posts.show', [1]);

- gX.