Vue.jsコンポーネントからERBの画面へ遷移するにはhrefメソッドを使う

業務でERB（Embedded Ruby）でできている画面の一部分だけをVue.js化しています。

Vue.jsで作ったコンポーネントで特定の操作を実行した後にERBでできている別の画面へ遷移させたかったのですが、やり方が分からなかったので備忘録として残します。

問題

ERBでできている画面のうち、モーダルウィンドウだけをVue.jsへ移行する作業に取り組んでいました。

元々の仕様として、モーダル内で「制限」ボタンを押すと処理の実行後にERBでできている別の画面へ遷移させる挙動でしたが、Vue.jsに移行後もその仕様を踏襲する方針となりました。

しかし、「Vue.jsからERBでできている画面へどう遷移させるんだ？」と混乱していました。

解決方法

結論として、JavaScriptのhrefメソッドを用いてwindow.location.href='https://hogehoge.com'のように記述すれば良いだけでした。

const onSubmit = async () => {
  if (!props.onClickSubmit) return;

  await props.onClickSubmit();
  // ユーザ一覧画面へ遷移
  window.location.href = 'https://hogehoge.com/users';
};

また、別タブで画面を開きたい場合は、次のように書きます。

const onSubmit = async () => {
  if (!props.onClickSubmit) return;

  await props.onClickSubmit();
  // ユーザ一覧画面へ遷移
  window.open = ('https://hogehoge.com/users', '_blank');
};

openメソッドを使う場合は、locationは不要なので注意してください。

おわりに

ERBとVue.jsが絡む実装はややこしいなといつも感じています。

参考文献

• Location: href property – Web API | MDN
• Window: open() method – Web API | MDN