🦥

Vue3 に向けて - vue-router 移行準備

nuichi

2022/08/25に公開

Vue.js

tech

ロンラン株式会社 CEO 兼 CTO の武部です。

この記事...もはや連載と化していますが、私たちのチームのように「諸事情でまだ Vue2 を使っており、Vue3 への移行のための準備はぬかりなく進めたい」方向けです。

これまでの記事です。

今回のテーマは Vue-router の移行準備です。

前回の Vue-i18n 同様、あくまでも移行中のため、次のニーズを満たせるようにします。

新しい実装や移行対象の Vue ファイル：setup script または Composition API での setup() を前提とし、route や router を使い $route や $router はもう使わない
それ以外：何も触る必要なし。グローバルスコープの $route $router などの機能をそのまま使い、コード移行の順番を待つ

しかし今回はこれまでと違って、あまり書くことがありません... vue-router に機能が実装されたので🎉

その日は突然やってきた

2022 年 8 月 22 日にリリースされた v3.6.0 で Composable が導入されました。

次のコードがすべてを語っています^[1]。

import {
  useRoute,
  useRouter,
  useLink,
  onBeforeRouteUpdate,
  onBeforeRouteLeave
} from 'vue-router/composables'

何も事前準備する必要なく、おもむろに useXxx や onBefore フックが使えます。

移行する Vue コンポーネント

ここでは $route を廃止し、composable から取得した route に切り替えてみます。

修正前はこのようなコードだったとします。

<script setup lang="ts">
const param1 = this.$route.params.param1
</script>

<template>
  <div>{{ $route.params.param2 }}</div>
</template>

修正後はこうなります。

<script setup lang="ts">
import { useRoute } from 'vue-router/composables'

const route = useRoute()

const param1 = route.params.param1
</script>

<template>
  <div>{{ route.params.param2 }}</div>
</template>

おわりに

今回はもうおわりです。なんとあっけない...

先月、まる一日ぐらい悪戦苦闘していた自分に伝えてあげたいです。「待て」と。

このときは @intlify/vue-router-bridge みたいなものが助けてくれるのかな？と思って、試行錯誤していたんですよね。これが助けかと勘違いして悪戦苦闘している人、私以外にもいないですかね？あ、いない？笑

着々と Vue コンポーネントの修正を進めて、将来の Vue3 / Vue-router@4 への移行準備を進めましょう。

脚注

いや... よく見ると Changelogs のコード、バグっていますね😵 ↩︎

ロンラン Tech ZennPublication

ロンランからの Zenn 的技術発信。誰かにとって役に立ちそうな気づきやノウハウをどんどん共有します。

その日は突然やってきた

移行する Vue コンポーネント

おわりに

Discussion