如何在有多个页面的网站上使用 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 路由之外的所有路由