У меня проблема при использовании vue-router с laravel. Когда я в режиме хэша, он работает нормально, мой веб-сайт отображает домашний компонент (http://localhost/minh-long-project/public/#/).
Но когда я использую историю режимов, она отображает '<! ---->' (http://localhost/minh-long-project/public/)
Мой код app.js:
require('./bootstrap');
import VueRouter from 'vue-router';
import HomeComponent from './components/HomeComponent.vue';
window.Vue = require('vue');
window.Vue.use(VueRouter);
const routes = [
{path:'/', component:HomeComponent, name:'HomeComponent'}
];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#app',
router
});
В master.blade.php:
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div id="app">
<div class="site-wrap">
{{-- GET HEADER OF PAGE --}}
@include('layouts.header')
{{-- DISPLAY CONTENT OF PAGE --}}
@yield('content')
{{-- GET FOOTER OF PAGE --}}
@extends('layouts.footer')
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/jquery-3.3.1.min.js')}}"></script>
<script src="{{ asset('js/jquery-migrate-3.0.1.min.js')}}"></script>
<script src="{{ asset('js/jquery-ui.js')}}"></script>
<script src="{{ asset('js/popper.min.js')}}"></script>
<script src="{{ asset('js/bootstrap.min.js')}}"></script>
<script src="{{ asset('js/owl.carousel.min.js')}}"></script>
<script src="{{ asset('js/jquery.stellar.min.js')}}"></script>
<script src="{{ asset('js/jquery.countdown.min.js')}}"></script>
<script src="{{ asset('js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('js/jquery.easing.1.3.js')}}"></script>
<script src="{{ asset('js/aos.js')}}"></script>
<script src="{{ asset('js/jquery.fancybox.min.js')}}"></script>
<script src="{{ asset('js/jquery.sticky.js')}}"></script>
<script src="js/main.js"></script>
</body>
В home.blade.php:
@extends('layouts.master')
@section('content')
<router-view name="HomeComponent"></router-view>
<router-view></router-view>
@endsection
Знаете ли вы эту проблему?