Vue 2 + composition API環境で $router を使う

背景

Vue 2 環境でも @vue/composition-api を使用することで、setup() な書き方が出来ます。

MyComponent.vue

import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  setup() {
    const count = ref(0);
  }
});

ただsetup()内では、今までのようにthisにはアクセスできないため、vue-routerの$routerはそのままでは使えません。

対処方法

@vue/composition-api が提供している getCurrentInstance() を使うことで、コンポーネントのインスタンスにアクセスすることが出来ます。
（なお、同名のAPIはVue 3でも提供されています）

use-router.ts

import { getCurrentInstance } from '@vue/composition-api';

export function useRouter() {
  // インスタンスにアクセス
  const instance = getCurrentInstance();
  
  // `setup()`外で使用するとインスタンスは取得できません
  // https://v3.vuejs.org/api/composition-api.html#getcurrentinstance
  if (!instance) {
    throw new Error(`Should be used in setup().`);
  }
  
  // proxyが従来の`this`にあたるコンポーネントインスタンス
  return instance.proxy.$router;
}

これで、setup() で利用出来るようになります。

MyComponent.vue

import { useRouter } from '~/use-router';

export default defineComponent({
  setup() {
    const router = useRouter();
    router.push('/');
  }
});