javascript - laravel 仅在我需要的页面上加载 vuejs 组件

Question

目前我们正在使用

将所有组件加载到 app.js中

Vue.component('ID', path-to-component);

这意味着如果我们的其中一个组件出现故障，则会破坏所有组件。

那么有没有办法在我们需要的特定页面上加载组件？

我试着把它推到 Blade 中的堆栈，但它出错了

Uncaught ReferenceError: require is not defined vuejs

我的代码是:

@push('scripts')
    <script>
        Vue.component('BookingPayments' ,  require('./components/bookings/bookings-payments'));
    </script>
@endpush

Answer 1

我建议您使用 lucasmazza/page.js仅在特定 URL 上加载 javascript 代码。您可以将代码范围限定为:

page.at('payments', () => {
    Vue.component('BookingPayments', require('...'));
});

库在 body 标签上使用了 data-page 属性。

您只能在 Laravel Mix (webpack) 处理的文件上使用 require 方法。