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

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

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インスタンスに対してメソッドを定義。

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

コンポーネントガード

  1. beforeRouteEnter
    コンポーネントへの遷移前
  2. beforeRouteUpdate
    コンポーネント上でルートが変化したとき
  3. beforeRouteLeave
    コンポーネントからの遷移前
// TypeScriptの場合
Component.registerHooks([
  'beforeRouteEnter'
])
// Vue.js3でTypeScriptの場合
Vue.registerHooks([
  'beforeRouteEnter'
])

ルートガード

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

  1. beforeEnter
    ルートの遷移前

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。