我正在尝试构建一个 Laravel 5.5 + VueJs 多页面应用程序。我不想使用 SPA(单页应用程序)方法使它看起来像一个多页应用程序。
URL 处的注册页面就是这种情况/register
。使用该命令php artisan make:auth
,我可以获得注册相关文件。场景是:
在web.php
中,我有:
Auth::routes();
在app.js
中,我有:
window.Vue = require('vue');
const app = new Vue({
el: '#app',
components: {
Register: require('./components/Register.vue')
}
});
我layout.blade.php
驻留在resources/views/
文件夹中,并具有以下内容:
<div id="app">
<?php
var_dump($component);
?>
@if (isset($component))
<component :is={{ $component }} >
@endif
@yield('content')
@if (isset($component))
</component>
@endif
</div>
该register.blade.php
文件具有以下内容:
@extends('layout', ['component' => 'Register'])
@section('content')
@endsection
Register.vue
留在里面resources/js/components/
并具有以下内容:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Register Component mounted.')
}
}
</script>
所以我的预期工作流程是:首先register.blade.php
调用将继承layout.blade.php
并作为数据发送Register
应该在那里呈现的组件。
我自己也不知道如何register.blade.php
将组件Register
作为参数在该行的数据中:
@extends('layout', ['component' => 'Register'])
在查看页面源代码时,我什至看不到app.js
页面中包含的文件。
当然,我npm run dev
每次都在测试页面之前运行命令。
问题 1:上述方法有什么问题?然而,正确的方法应该是什么?
编辑:
我的webpack.mix.js
有:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.styles([
'resources/assets/css/style.css'
], 'public/css/style.css')
;
mix.options({
extractVueStyles: 'public/css/vue-style.css'
});
EDIT2:
在页面中,我看不到组件中的任何内容Register
。我之前忘了提。
EDIT3: 问题 2: Laravel+VueJs 组合不是真正意义上的 MPA(多页面应用程序)吗?