在laravel中的vue js中的历史模式下,组件未加载

时间:2018-05-08 17:58:40

标签: laravel-5 vue.js

当我将模式更改为历史记录时,会删除URL中的哈希值,但不会加载组件。这是app.js

window.Vue = require('vue');
import VueRouter from 'vue-router';



var index = Vue.component('index', 
require('./components/frontend/testingIndexComponent.vue'));
var component1 = Vue.component('component1', 
require('./components/frontend/testingComponent.vue'));


Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',    
routes: [
  { path: '/', component: index },
  { path: '/component1', component: component1 }
]
})
const app = new Vue({
router
}).$mount('#app')

这是web.php

Route::get('/{vue_capture?}', function () {
return view('index4');
})->where('vue_capture', '[\/\w\.-]*');

这是index4.blade.php

<body>
  <div>
    <h1>Header</h1>
        <!-- <a><router-link tag="li" to="projects">
            sdds
        </router-link></a> -->
</div>
<div id="app">
    <a><router-link  to="component1">
            sddsdadadssa
        </router-link></a>
    <router-view>

    </router-view>
</div>
<div>
    <h1>Footer</h1>
</div>
<script type="text/javascript" src="{{URL::to('public/js/app.js')}}"> 
</script>

1 个答案:

答案 0 :(得分:0)

删除

mode: 'history'

并使用

hashbang: false,
history: true

代替