2017-01-10 5 views
2

У меня есть проект Laravel 5.3 с использованием Vue-router. Я использую теги <router-view></router-view> в шаблоне (home.blade.php).Vue-router не загружает URL-адрес, введенный в браузер

Единственная проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить представление, набрав URL-адрес в маршрутизаторе. Он работает только в том случае, если я использую router-link в своих файлах кликов.

Вот мой главный JS файл, в котором я реализую маршрутизатор:

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') 

Мой web.php файл:

<?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', '.*'); 

Любая идея, почему это может делать это?

ответ

2

Вы пытались установить history: true внутри new VueRouter, вам не нужно использовать хеш-URL, если у вас есть бэкэнд.

+0

Это похоже на работу, но только если это так: #/url-here – mdobrenko

+1

Существует метод удаления хэша, но вам нужно будет внести некоторые изменения в конфигурацию вашего сервера https: //router.vuejs. org/en/essentials/history-mode.html –

+1

Я нашел хорошую конфигурацию для IIS: (web.config) https://gist.github.com/mkelley82/19d2e0464e5375b19c4cb1f39e9624ef – Reinhard