Я пытаюсь создать многостраничное приложение 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'
});
РЕДАКТИРОВАТЬ2: На странице не отображается содержимое компонента Register. Я забыл упомянуть об этом раньше.
EDIT3: Вопрос 2: Разве комбинация Laravel + VueJs не предназначена для MPA (многостраничного приложения) в истинном смысле этого слова