ページ遷移直前の vue-i18n $t() 使用

vue-i18n

#1

Vue-Router を使っています。
ページを遷移時に this.$toast(this.$t('message')) のようにメッセージしたいと思います。「ページを離れるので実行中の動作を停止しました」など。

beforeDestroy() 内で行うとエラーになります。
TypeError: Cannot read property '_t' of null

beforeRouteLeave() 内でも同じですが、
next で進行を操作できるので、ここで処理の完了を待って resolve 後に next() するなどで一応達成できました。

ただ、この使い方で正しいのか、引っかかっています。
ページ遷移直前での使用は、上記の考え方で合っているでしょうか?


#2

そうですね。VueI18nのインスタンス(this.$i18n)は、beforeDestroy時に破棄するので、コンポーネントのbeforeDestroy時にVueI18nのインスタンスが破棄されてしまうため、this.$tのようなメソッドの実行は動作しないです。

VueRouterのナビゲーションガードのbeforeRouteLeaveは、調べた感じですとコンポーネントのbeforeDestroyが実行されるまでに呼ばれるので、VueI18nインスタンスに依存したthis.$tなどの処理は動作します。

なので、使い方はあってます。


#3

ありがとうございます。
質問では簡潔に「 resolve 後に」と書きましたが、実際はスマートに書けないケースも多く、
フラグ変数を設けて watch して、条件を満たしたら unwatch して next して、、とページ遷移がトリガになると一瞬のインスタンスを担保するためだけのコードが多くなりますね。
その一連を mixin にできないか検討してみます。