kz’s blog

興味のあることについて書いていきます。

Vue Router のルーティングをネストする

前提

Vue Router をインストールしていない場合はしておいて下さい。

画面構成

下記のような画面構成を目指します。

  • ホーム
  • ユーザ
    • ユーザ詳細
    • ユーザ編集

Route 設定

ルーターにユーザ機能を追加します。

src/router.js

    {
      path: '/user',
      component: () => import('./views/User.vue'),
      children: [
        {
          path: '',
          component: () => import('./views/UserHome.vue')
        },
        {
          path: ':id',
          component: () => import('./views/UserDetail.vue'),
          children: [
            {
              path: 'edit',
              component: () => import('./views/UserEdit.vue')
            }
          ]
        }
      ]
    }

router 修正 · kz62123/sample@ec1f6de · GitHub

ポイントはchildrenプロパティにさらにルーターを定義しているところです。

この時、path: 'edit'にアクセスする場合、下記のようなURLになります。

/user/:id/edit

:idは動的ルートマッチングです。不明な場合はこちらを参考にして下さい。

ページの作成

続いて、各種ページを作成していきます。

作成するページは以下の4つです。

  • ユーザ
  • ユーザホーム
  • ユーザ詳細
  • ユーザ編集

ユーザ

ユーザ機能で共通で表示する部分になります。

src/views/User.vue

<template>
  <div>
    <h1>User page</h1>
    <div id="nav">
      <router-link to="/user/hoge">hoge</router-link> |
      <router-link to="/user/foo">foo</router-link>
    </div>
    <router-view/>
  </div>
</template>

User 作成 · kz62123/sample@a9366dd · GitHub

この画面では各種ユーザへのリンクと、下層の画面を表示させるために<router-view/>を記述しています。

この<router-view/>は自分より下の階層を表示することができます。

ユーザ画面の場合はsrc/router.jschildrenにユーザホームとユーザ詳細がいるので、そのどちらかを表示することができます。

ちなみにユーザホームはpath: ''となっているので、/userにアクセスした時に表示されます。

ユーザホーム

ユーザ機能に遷移してきた際、一番最初に表示される部分になります。機能は特に持っておりません。

src/views/UserHome.vue

<template>
  <div>
    <h1>home</h1>
  </div>
</template>

UserHome 作成 · kz62123/sample@adafcc5 · GitHub

ユーザ詳細

ユーザ画面にてhogeまたはfooのリンクを押した際に表示される画面です。

src/views/UserDetail.vue

<template>
  <div>
    <h1>detail {{ $route.params.id }}</h1>
    <div id="nav">
      <router-link :to="'/user/' + $route.params.id + '/edit'">edit</router-link>
    </div>
    <router-view/>
  </div>
</template>

UserDetail 作成 · kz62123/sample@aa172ff · GitHub

{{ $route.params.id }}で遷移元で選択したユーザを表示しています。

また、ユーザ編集に遷移するためのリンクにも{{ $route.params.id }}を使用しています。 この時、/user/hoge/editのようなURLが生成されています。

リンクを設置する注意点として、<router-link :to="'/user/' + $route.params.id + '/edit'">edit</router-link>のようにtoではなく:toにして下さい。

これは$route.params.idをバインドして動的にするためです。

ユーザ編集

ユーザ詳細にてeditリンクで遷移してきた際に表示される部分になります。

src/views/UserEdit.vue

<template>
  <div>
    <h1>edit {{ $route.params.id }}</h1>
  </div>
</template>

UserEdit 作成 · kz62123/sample@574698a · GitHub

ここでも{{ $route.params.id }}でユーザを表示させております。自分より親画面の動的ルートマッチングのパラメータも取得できるようですね。

App.vue 修正

最後に忘れてはいけないのは、App.vueからユーザ画面へのリンクです。

src/App.vue

      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user">User</router-link>

App 修正 · kz62123/sample@58f57d2 · GitHub

終わりに

最終的なソースコードは以下になります。

github.com