「これからはじめるVue.js実践入門」の感想・備忘録6

これからはじめるVue.js実践入門

posted with ヨメレバ

山田祥寛 SBクリエイティブ 2019年08月23日頃

Vue Router

Vue Routerの準備

npx vue create xxxでのプロジェクト作成時に有効にする。

Use history mode for router?: Yesでhistoryモードにする。
- historyモードの場合でも、ブラウザがHistory API非対応の場合にはhashモードにフォールバックされる。
既存のプロジェクトにはnpx vue add routerで追加する。
- vue addで後から追加した場合、既存の App.vue が上書きされるので注意。

ディレクトリ構成

viewsディレクトリ内にコンポーネント、src/router/index.jsにルーティング定義ファイル、が生成され、main.jsでルーティングをVueインスタンスに紐づけている。
※ viewsディレクトリ内にルーティングに関わるコンポーネント、compomemtsディレクトリ内により細かな部品、を格納するのが慣例。
ただし、小規模アプリでは全てをcompomemtsディレクトリ内に格納することもある。

コンポーネントのインポート

利用するコンポーネントはimport MyComponent3 from '../components/MyComponent3.vue'のようにインポートする。
ただし、使用頻度の少ないコンポーネントは必要なタイミングでインポートする。（Code Splitting）
component: () => import(/* webpackChunkName: "my-component3" */ '../components/MyComponent3.vue'),

JavaScriptでのページ移動

location.hrefプロパティではなくthis.$router.push()を利用する。
※ ブラウザに履歴を残さない場合は$router.replace()

ルートパラメータ

$routeオブジェクト経由でルートパラメータ渡す場合

この方法だとルーター経由でしか使えないコンポーネントとなってしまうため、後述するprops経由で渡す方法を使うべき。

1. ルート定義

src/router/index.jsでpathパラメータにプレイスホルダーをつける。
ex) path: '/my-component/:xxx',
- パラメータの後に?を付けると省略した場合もマッチする。
  ex) path: '/my-component/:xxx?',
- パラメータの後に*や+を付けると残りの全てのパスがマッチする。
  （*は0回以上、+は1回以上マッチ
  ex) path: '/my-component/:xxx*',

2. コンポーネントでルートパラメータを受け取る

this.$route.params.xxx
$routeオブジェクトはルートに関する情報を持っているオブジェクトであり、params, name, fullPath, path, query, hashなどのプロパティがある。

props経由でルートパラメータ渡す場合

1. src/router/index.jsでprops: true指定する。

{
  path: '/my-component3/:id?',
  name: 'my-component3',
  component: () => import(/* webpackChunkName: "my-component3" */ '../components/MyComponent3.vue'),
  props: true
}

2. コンポーネントでプロパティを定義する。

props {
  id: String
}

文字列以外のpropsを定義したい場合

props: route => ({
  id: Number(route.params.id),
  msg: route.params.msg
})

TypeScriptの場合

@Component
export default class MyComponent3 extends Vue {
  @Prop({type: Number})
  private id!: number;

  @Prop({type: String})
  private msg!: string;
}

マルチビュー

<router-view>を複数配置する場合、name属性を付与する。

{
  path: '/multi',
  name: 'multi',
  components: {
    default: () => import(/* webpackChunkName: "my-component2" */ '../components/MyComponent2.vue'),
    sub: () => import(/* webpackChunkName: "my-component3" */ '../components/MyComponent3.vue'),
  }
},

<router-view>
<router-view name="sub">

入れ子のビュー

入れ子にする場合、ルーティング定義にchildrenを指定し、親コンポーネントのtemplateに<router-view>を含める。

{
  path: '/nest',
  name: 'nest',
  component: () => import(/* webpackChunkName: "my-component4" */ '../components/MyComponent4.vue'),
  children: [
    {
      path: 'child', // /nest/childで表示される
      name: 'my-component2',
      component: () => import(/* webpackChunkName: "my-component2" */ '../components/MyComponent2.vue')
    }
  ]
},

ナビゲーションガード

ライフサイクルフックのように、Vue Routerでの画面遷移時に処理を実行するための仕組み。
リダイレクトもしくはキャンセルによって遷移をガードするために主に使用される。
3つの位置で宣言することができる。

グローバルガード

src/router/index.jsのVueRouterインスタンスに対してメソッドを定義。

beforeEach
ルートの遷移前(コンポーネントガード解決前)
beforeResolve
ルートの遷移前(コンポーネントガード解決後)
afterEach
ルートの遷移後

コンポーネントガード

beforeRouteEnter
コンポーネントへの遷移前
beforeRouteUpdate
コンポーネント上でルートが変化したとき
beforeRouteLeave
コンポーネントからの遷移前

// TypeScriptの場合
Component.registerHooks([
  'beforeRouteEnter'
])
// Vue.js3でTypeScriptの場合
Vue.registerHooks([
  'beforeRouteEnter'
])

ルートガード

src/router/index.jsのルート定義に対してメソッドを定義。

beforeEnter
ルートの遷移前