Vue.js+Vuetify.jsを使ったWEBアプリケーション構築 ～画面遷移(Vue Router)の設定～

はじめに

今回は以前投稿した記事「Vue.js+Vuetify.jsを使ったWEBアプリケーション構築」のサンプルアプリケーションを基に画面遷移の設定について説明したいと思います。

画面遷移の設定

画面遷移はVue Router使って設定します。
Vue Routerとは・・・

https://router.vuejs.org/ja/

Vue Router は Vue.js 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです:
・ネストされたルート/ビューマッピング
・モジュール式、コンポーネントベースのルータ構造
・ルートパラメータ、クエリ、ワイルドカード
・Vue.js の transition 機能による、transition エフェクトの表示
・細かいナビゲーションコントロール
・自動で付与される active CSS クラス
・HTML5 history モードまたは hash モードと IE9 の互換性
・カスタマイズ可能なスクロール動作

Vue Routerの機能の内、サンプルアプリケーションで利用しているのは次の機能です。

• モジュール式、コンポーネントベースのルータ構造
• ルートパラメータ、クエリ、ワイルドカード
• 細かいナビゲーションコントロール
• HTML5 history モードまたは hash モードと IE9 の互換性

サンプルアプリケーションでの画面遷移の設定は以下のようになります。
ソースコードにコメントで説明します。

src/router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from './store';
import * as aTypes from '@/store/action-types';
import NotFound from './components/base/NotFound';
import Ichiran from './components/screen/Ichiran';
import Shosai from './components/screen/Shosai';
import Toroku from './components/screen/Toroku';
import TorokuKanryo from './components/screen/TorokuKanryo';
import Transition from './utilities/Transition';

// VueでVue Routerを利用する宣言です。
Vue.use(VueRouter);

// ルートパラメータの設定をします。
// 表示言語をURLから取得できるようにします。
const PATH_PREFIX = '/:lang';

// コンポーネントベースのルータ構造となります。
let routes = [
  {
    // トップページの設定です。
    path: '/',
    // 「/【表示言語】/ichiran」へリダイレクトします。
    redirect: '/' + store.state.lang + '/ichiran'
  },
  // 404画面は{path: PATH_PREFIX}の前に定義しないと
  // 「/404」は{path: PATH_PREFIX}にマッチしてしまうので、
  // 後続のbeforeEachで無限ループになってしまうので注意してください。
  {
    path: '/404',
    component: NotFound
  },
  {
    path: PATH_PREFIX,
    redirect: PATH_PREFIX + '/ichiran'
  },
  {
    // 「/【表示言語】/ichiran」の設定をします。
    path: PATH_PREFIX + '/ichiran',
    // 名前を指定して画面遷移できるようにします。
    name: 'ichiran',
    // 「/【表示言語】/ichiran」はIchiran画面コンポーネントを表示します。
    component: Ichiran
  },
  {
    path: PATH_PREFIX + '/shosai',
    name: 'shosai',
    component: Shosai
  },
  {
    path: PATH_PREFIX + '/toroku',
    name: 'toroku',
    component: Toroku
  },
  {
    path: PATH_PREFIX + '/kanryo',
    name: 'kanryo',
    component: TorokuKanryo
  },
  {
    // 上記以外のURLは404のNotFound画面を表示します。
    path: '*',
    redirect: '/404'
  }
];

// VueRouterオブジェクトの作成
const router = new VueRouter({
  // デフォルトはhashモードでURLが「http://localhost:8080/#/ja/ichiran」のようになります。
  // historyモードにしてURLを「http://localhost:8080/ja/ichiran」のようにします。
  // 環境変数から取ってくるようにしているのはモックアップの際はhistoryでは動作しない為です。
  mode: process.env.VUE_APP_ROUTER_MODE,
  // HTTPサーバにアプリを置く際に特定のディレクトリに置く場合などに指定します。
  base: process.env.BASE_URL,
  // 上記のルートを設定します。
  routes
});

// ・・・省略

// 画面遷移前イベント
router.beforeEach((to, from, next) => {
  // ・・・省略

  // langが設定されていない場合、または対応していない言語の場合は404画面を表示するようにします。
  // langが設定されていない場合というのは、サンプルアプリケーションでは404画面です。
  // 「/404」が対応していない言語として「/404」へのリダイレクトが無限ループします。
  if (!to.params.lang || store.state.enableLangs.includes(to.params.lang)) {
    movePage(next, to.params.isCacheClear, TRANSITION_TIME);
  } else {
    next({path:'/404'});
  }
})

// 画面遷移後イベント
router.afterEach((to) => {
  // ・・・省略
})

// Vue Routerオブジェクトを返却
export default router;

src/main.js

// ・・・省略
new Vue({
  render: h => h(App),
  // VueにVue Routerを設定して、コンポーネントから利用できるようにします。
  router,
  i18n,
  store
}).$mount('#app');

src/Shosai.vue

// ・・・省略
<script>
// ・・・省略
  methods: {
    setTorokuJoho() {
      // 余談ですが、Vue Routerには、$routeと$routerがありますので、
      // ご利用の際は混乱しないようにお気を付けください。
      if (this.$route.params.torokuJoho) this.torokuJoho = this.$route.params.torokuJoho;
    },
    back() {
      // こんな感じで画面遷移できます。
      // pathでも画面遷移できますが、表示言語をURLに含める必要があるので、nameで遷移しています。
      this.$router.push({name: 'ichiran'});
    }
  },
// ・・・省略
</script>

おわりに

Vue Routerは日本語マニュアルも充実しているし、使い方もシンプルなのであまり苦労はしないかもしれません。
私は、無限ループで若干手間取りました。
リダイレクトとルートの定義順には気を付けましょう。