2017-01-10 3 views
2

Ich habe ein Laravel 5.3-Projekt mit Vue-Router. Ich verwende die <router-view></router-view> Tags in einer Vorlage (home.blade.php).Vue-Router lädt URL nicht in Browser

Das einzige Problem, das ich renne, ist, dass ich nicht scheinen kann, um die Aufrufe zu erhalten, indem Sie die URL in den Router eingeben. Es funktioniert nur, wenn ich router-link in meinen Blade-Dateien verwende.

Hier ist meine Haupt-JS-Datei, wo ich den Router implementieren:

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter); 
Vue.use(require('vue-resource')); 

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content'); 

Vue.component(
    'passport-clients', 
    require('./components/passport/Clients.vue') 
); 

Vue.component(
    'passport-authorized-clients', 
    require('./components/passport/AuthorizedClients.vue') 
); 

Vue.component(
    'passport-personal-access-tokens', 
    require('./components/passport/PersonalAccessTokens.vue') 
); 

const routes = [ 
    { path: '/view1', component: require('./components/view1.vue')}, 
    { path: '/view2', component: require('./components/view2.vue')}, 
    { path: '/view3', component: require('./components/view3.vue')} 
] 

const router = new VueRouter({ 
    routes: routes, 
}) 

const app = new Vue({ 
    router 
}).$mount('#app') 

Meine web.php Datei:

<?php 

/* 
|-------------------------------------------------------------------------- 
| Web Routes 
|-------------------------------------------------------------------------- 
| 
| Here is where you can register web routes for your application. These 
| routes are loaded by the RouteServiceProvider within a group which 
| contains the "web" middleware group. Now create something great! 
| 
*/ 

//All the authentication routes 
Auth::routes(); 

//Only routing needed for Laravel 
Route::get('/{catchall?}', ['as' => 'start', 'middleware' => 'auth', function() { 
    return view('home'); 
}])->where('catchall', '.*'); 

Jede Idee, warum es dies tun kann?

Antwort

2

Haben Sie versucht, history: true innerhalb der new VueRouter zu setzen, müssen Sie keine Hash-URLs verwenden, wenn Sie ein Backend haben.

+0

Das scheint zu funktionieren, aber nur wenn ich es so mache: #/url-here – mdobrenko

+1

Es gibt Methode, um Hash zu entfernen, aber Sie müssen einige Änderungen an Ihrer Server-Konfiguration vornehmen https: //router.vuejs. org/de/essentials/history-mode.html –

+1

Ich habe eine gute Konfiguration für IIS gefunden: (web.config) https://gist.github.com/mkelley82/19d2e0464e5375b19c4cb1f39e9624ef – Reinhard

Verwandte Themen