Как использовать Vue на сайте с несколькими страницами?

Question

У меня есть проект в Laravel, куда я импортирую свой app.js:

require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
  el: '#app',
  data: {},
  methods: {},
});

Этот файл импортируется в мой основной макет (app.blade.php), например:

  <div id="app">
    @yield('content')
  </div>

  <script src="{{asset('js/app.js')}}"></script>
  @yield('scripts')

Полагаю, вы не можете создать экземпляр нового экземпляра Vue внутри другого ... поэтому я ДОЛЖЕН работать с одним экземпляром Vue. #App div охватывает весь динамический контент моего многостраничного приложения, и поэтому мой вопрос ... на разных страницах, как мне отделить мой код Vue.js? Если я помещу весь код в app.js, он будет загроможден, и в моем коде будут отсутствовать ссылки в зависимости от того, на какой странице находится пользователь.

Я пытался написать отдельный <script></script> для каждой страницы. , но для этого требуется, чтобы я вводил токен CSRF для каждой страницы, но это выглядит как СУХОЙ.

Как люди это делают?

Answer 1

Ваш маршрут должен быть таким, чтобы принимать маршрутизатор vue

Route::get('/{view?}', function () {
    return view('vue');
})->where('view', '^(?!api\/)[\/\w\.-]*');

, который будет принимать каждый маршрут, кроме маршрутов API