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路由外的所有路由

如何在具有多个页面的网站上使用Vue？

1 个答案: