【Nuxt.js/Vue.js】ルーティングとは

2020年4月21日 00:11

忘備録メモ(作成中)

ルーティングとは

URLで表示するコンポーネントを制御するnuxt.js(vue-router)の機能。
nuxt.jsは、vue.jsのフレームワーク
nuxt.jsでは、Pages配下がルーティングになる。

Pages＞index.vue
ページのURLと連動しているファイルで、この中身がページに表示される。
ナビのHOME(TOP)になる部分
例）http://localhost:8000/
Pages＞about.vue
ここにファイルを作ると、index.vueのボトム(下層)ページになる
例）http://localhost:8000/about
--------------------------------------------------------------------------------
▼フォルダ構造（例）
Pagesフォルダ
　ーindex.vue　→TOPページ（http://localhost:8000/）
　ーabout.vue　→TOPページの下層ページ（http://localhost:8000/about）
　ーuser.vue　→TOPページの下層ページ（http://localhost:8000/user）

ルーティングは、Vue.jsでシングルページアプリケーション【SPA】の構築する場合には必須といっていいほど利用されている。
参考： https://nuxtjs.org/guide/routing/

シングルページアプリケーション【SPA】とは

html/css/JavaScriptを同じファイルに書く、Vueの機能

<template></template>の中にHTML
<script></script>の中にJavaScript
<style></style>の中にCSS

利点

①ブラウザで「戻る」「進む」の操作が可能になる
→ユーザビリティを向上に繋がる
②各画面や機能を個々のページとして認識させる事ができる
→SEO的にも有利
③URLが個々に構築される

vue-routerの導入方法

nuxtのVue Routerというパッケージを使う事で、自動でルーティングを実行している。

導入手順：https://b1tblog.com/2019/10/03/vue-router/

vue-routerで何ができる？

router-linkコンポーネントを使ってナビゲーションを定義

続く（作成中）・・・