Vue SPA VueRouter編 -第1章- ~最高の品質を!~

SPA

SPA(Single-page Application)は一つのウェブページを使用して内容のみを変えて
画面遷移させるアプリケーション設計のこと。

Vue Routerインストール

npm install vue-router

src/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

vue.use(VueRouter)



組み込みコンポーネント
<router-view>ルートにあうコンポーネントを描画する
<router-link>ルートのリンク作成。

使い方

src/views/TestA.vueとTestB.vueを作成後
<template></template>テンプレート(タグ内はなんでもOK) を記述。

router.js

//VueRouterインスタンスを生成
const router = new VueRouter({
//URLのパスと紐づくコンポーネントをマッピング
  routers:[
    { path:'/', component:TestA},
    { path:'/Test',component: TestB}
  ]
})


export default router


main.jsでアプリケーションに登録

import router from './router.js'

new Vue({
  el : '#test,'
  router,//アプリケーションに登録
  render: => h => h(Test)
})

App.vueに <router-view>タグを記述することで、ルートとマッチしたコンポーネントの内容が描画される。

URLのハッシュ
Vue Routerはハッシュヒストリーの2種類のモードが選択できる。
デフォルトはハッシュモードになっていている。
ハッシュモードはハッシュ値の変更によって現在のルートを検知するため、 ブラウザのHistroyAPIのサポートやサーバー側の設定を必要としない。 ただURLに#が付与されてページ内リンクが使用できない。

ヒストリーモードにするには、

const router = new VueRouter({
  mode : 'history',
  routes : []
})

サーバの設定が必要になる。

ルート定義のオプション

ルート定義

const router = new VueRouter({
  routes : [
    {
      //ルートA
    },
    {
      //ルートB
     }
  ]

})



名前つきルート
ルートに固有の名前をつけるにはname : 'hoge',

パラメータ
idなどの可変URLにはパラメータを使う。path: '/hoge/id',

クエリ
URL付与クエリはthis.$route.queryでオブジェクト形式で格納される。

メタフィールド
閲覧認証のルート情報の設定はmeta: {requiresAuth: true}

リダイレクト
特定のパスにリダイレクトは{path: '/tetsa', redirect: '/testb'}
名前指定は{path: '/tetsa', redirect: {name : 'hoge'}}

次回!

VueRouterクライマックス編! ついにVueの基礎学習が終わる!

参照文献

基礎から学ぶ Vue.js
https://www.amazon.co.jp/基礎から学ぶ-Vue-js-mio/dp/4863542453/