VueRouter を使う
Vue.js 用の SPA 構築ライブラリ
ページごとに出すコンテンツを分けたりできる
サーバーサイドでいうところのルーティング切り替えというよりは、URL をみて表示するコンポーネントを部分的に出し分けるみたいなイメージ
<router-view></router-view> 内にルーティングされたコンポーネントが配置される
このタグの外側は全ページ共通要素として利用できる
code:js
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
mode: 'history', // 普通のURLっぽく遷移する
routes
})
SPAの構築
サーバーサイドではどんなURLに対しても index.html 的なのを読み込むよう Nginx などでルーティングする
VueRouter がページに応じてよしなにコンテンツを出し分けてくれる
OGP用のタグは Twitter、FacebookのクローラーがJS認識しないのでだめ
静的なHTMLに埋め込む必要が…