基本
app.jsで記述したpathをlaravel側のweb.phpにも記述。その際、returnするviewはvueの起点ページにする。
Route::get('/profile', function() {
return view('home');
});
→ home.blade.phpにvue componentのprofileがある場合、profileがレンダリングされた状態で開ける。
ただしcomponentがnestされている場合...
@app.js
const routes = [
{ path: '/profile', component: Profile,
children: [
{
path: '/follow', component: Follows, ・・・〇
},
{
path: 'activity', component: Activity ・・・✖
}
]
},
@web.php
Route::get('/follow', function() { ・・・〇
return view('home');
});
Route::get('/profile/activity', function() { ・・・✖
return view('home');
});
@親component
<router-link to="/follow">Following</router-link> ・・・〇
<router-link to="/profile/activity">Activity</router-link> ・・・✖
activityはprofileページからrouter-linkを通した場合開けるが、ページリロードの場合、component profile, activityともにレンダリングされない。
/profile/activityがrouter-viewに反映されない。
一方、child componentのfollowはpathを/followとし、root path化するとリロード経由でもレンダリングされる。
child componentをリロード経由で表示させたいならpathをrootにする(pathをnestできない???純粋なVue SPAならこの制約外。)
nestされたpathのrest化に成功
- 問題点だったもの
vue関連を含むapp.jsの読み込み方法に問題があった
app.blade.php内にて下記のように記述
<script src='js/app.js'></script>…×
相対path表記だったため、例えば/profile/activityをロードするとapp.jsがprofile/js/app.jsになりnot foundになる。
こちらに訂正⇒ <script src="{{ asset('js/app.js') }}"></script>…〇
絶対path表記に変更
new issue:
laravel側のparameter付きroute と vue側のrouteがぶつかる
layoutを設定したapp.blade.php内で読み込んだjavascriptファイル内にajaxリクエストをするscriptがあり、この影響でparameter付きroute時にエラーが発生していた。
error: [Deprecation] Synchronous
XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
error: Uncaught TypeError: Cannot redefine property: $router
具体的には以下をコメントアウトしてエラーが除けた
app.blade.php内(layoutを設定していたファイル)
$.get("skin-config.html", function (data) {
if (!$('body').hasClass('no-skin-config'))
$('body').append(data);
});
参考:
SPA with Vue.js and Laravel: Routing Basics
SPA with Vue.js and Laravel: Routing Basics
- router-linkにparameterとさらにもう一層nestされたroute
<router-link :to="{ path: '/user/' + user.name + '/follow' }" >
<router-link :to="{ path: '/user/' + user.name + '/activity' }" >
computed: {
user() {
return this.$store.state.user.user; /* define param */
}
},
@app.js
const routes = [
{ path: '/user/:userName', name: 'user', component: Profile,
children: [
{
path: '', component: Activity /* /user/param */
},
{
path: 'follow', component: Follows /* /user/param/follow */
},
{
path: 'activity', component: Activity /* /user/param/activity */
}
]
},