読者です 読者をやめる 読者になる 読者になる

Laravel + vue-router vue spaページのREST化

基本

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ならこの制約外。)