Question

与laravel一起使用vue-router时遇到问题。当我设置哈希模式时，它可以正常工作，我的网站显示主页组件（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

你知道这个问题吗？

具有laravel的配置模式Vue路由器

0 个答案: