2016-09-26 15 views
3

私はセットアップvue-routerを正常にセットアップしましたが、私はそれを私のlaravel 5.3ルートと混在させていくつか問題があります。vue-router with laravel routes

私は家のためのPHPのルートがあります。

Route::get('/', array('as' => 'home', 'uses' => '[email protected]')); 

を、私はセットアップVUE-ルータのルートを持っている:

'/user-feed': { 
    name: 'user-feed', 
    title: 'User Feed', 
    component: Feed 
}, 

'*': { 
    component: PageNotFound 
} 

web.phpルートファイルでは、私は次のようしている:

Route::get('/', array('as' => 'home', 'uses' => '[email protected]')); 

// use vue-router route 
Route::get('/{subs}', [function() { 
    return view('layouts'); 
}])->where(['subs' => '.*']); 

ここで私の問題は、私がルートの順序を変更するときです(ホームルータの前にvue-router)、私はhomeルートにアクセスすると、Page not foundvueルートがレンダリングされ、user-feedv-linkで使用できるようになります。 VUE-ルータがhomeルートの後にあるとき

、家が適切にレンダリングされますがvue-routerv-linkを通じてアクセス可能ではないと私はVUE-ルータにアクセスすることができます唯一の方法は、手動でURLを入力することによってです。

vue-routerと一緒にlaravel routeを使用するにはどうすればよいですか?

答えて

3

論理的な理由がある場合を除いて、フロントエンドのナビゲーションに2つを一緒に使用しないでください。 Vueルーターはシングルページアプリケーションを対象としており、LaravelのルーティングシステムはマルチページアプリケーションやAPIを対象としています。私が考える最も一般的な設定は、あなたのSPAを含む単一のテンプレートに/api/という単一のテンプレートにリダイレクトすることを除いて、すべてのLaravelルートを持つことです。たとえばapp.blade.phpです。そこからvue-routerがフロントエンドのナビゲーションになり、/api/エンドポイントはlaravelのデータの入出力方法になります。

+1

を解決することがあり、これを試してみてください。したがって、この場合、すべてのページがvue駆動されるわけではありません。 – raffffffff

+0

本当にそれを行うべきではありませんが、必要な場合は、まだlaravel生成ページにリンクする必要のあるv-linkを使用しないことをお勧めします。 – jostrander

0

が、これは私がVUEに私のブレードのページを変換するプロセスにまだだので、一緒に両方を使用する必要があなたの問題

export var router = new Router({ 
    hashbang: false, 
    history: true, 
    linkActiveClass: 'active', 
    mode: 'html5' 
}); 
router.map({ 
    '/': { 
    name: 'home', 
    component: Home 
    }, 
    '/dashboard': { 
    name: 'dashboard', 
    component: Dashboard 
    }, 
    '/404notfound': { 
    name: 'pagenotfound', 
    component: Pagenotfound 
    } 
}); 

// For every new route scroll to the top of the page 
router.beforeEach(function() { 
    window.scrollTo(0, 0); 
}); 

// If no route is matched redirect home 
router.redirect({ 
    '*': '/404notfound' 
});