Vue Routerについて

Vue Routerとは？

Vueを使用してシングルページアプリケーションを作るならほぼ必須の機能。シングルページアプリケーションで表示させる内容を動的に変化させると、閲覧・操作の履歴が残らないことが多かっ。、 Vue Routerは履歴を持つことが可能なため、ユーザーの戻る/進むの操作に対応できると同時に、個々の表示内容をページとして認識させることが出来るためSEO(検索エンジン最適化)にも有利となります。

参考ページ

router.vuejs.org

qiita.com

やってみる！

See the Pen oNNoZjV by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

Top/About/Menuボタンを押すとそれぞれ下の内容が変わっていることがおわかりいただけると思います。

router-link、router-view

    <router-link to="/" id="btn">Top</router-link>
    <router-link to="/about" id="btn">About</router-link>
    <router-link to="/menu" id="btn">Menu</router-link>

この部分が、HTMLでいう<a>タグの役割を果たします。

ページが読み込まれた時に<a>タグに自動的に変換してくれます。

to=""に遷移先のページを指定します。<a>タグで言うhref=""の部分ですね。

そして

<router-view></router-view>

router-linkで記述したリンクを実際に生成しているのはこの部分になります。

これを書き忘れると展開されませんので注意しましょう！

ページの設定

const Top = { template: '<div id="page">Hello!</div>' }
const About = { template: '<div id="page">このページはVueRooterのテスト用です</div>' }
const Menu = { template: '<div id="page">スマイル ¥０</div>' }

ここで、実際に表示される個別ページを記述しています。

今回はCodePenで記述したのでまとめて書いていますが、本来であれば

top.vue、about.vue、menu.vueのようにそれぞれのVueファイルにわけてあげるのが良いかと思われます。

const routes = [
  { path: '/', component: Top },
  { path: '/about', component: About },
  { path: '/menu', component: Menu }
]

ここでファイルとの紐付けを行っています。

別々のVueファイルにわけたとしてもpathには.vue表記は不要です。

path:'/'は、初期表示されるページを表します。

ルーター インスタンスの生成

const router = new VueRouter({
  routes
})

ルーターインスタンスを生成しています。

routesはroutes: routesの短縮記法になります。

rootとなるインスタンスを生成してマウント

const app = new Vue({
  router
}).$mount('#app')

$mountメソッドを使用することでVue.jsが生成するDOMへの置き換えを行っています。

※DOM…HTML等の要素にアクセスし、操作を可能にします

これがVueRooterの基本！

公式ドキュメントのはじめにの部分を少しいじるだけでこんなに簡単に基本のシングルページアプリケーションを作成することができました！

SuzuBlog

webのお勉強はじめたばかりの初心者。備忘録

Vue Routerについて