Vue routerのブラウザーバックによる空$route.paramsの対処方法


概要

Vue.jsを用いたCRUD開発で,編集処理後にブラウザーバック (ブラウザーの戻る) で編集画面に戻ると,$route.paramsが空で困ってしまった。

対処方法を考えたので,今後のために記録として残す。

結論としては,一覧画面から編集画面への遷移には,URLクエリーでユーザー名を引き渡すことで解決できた。

問題

問題が発生した画面遷移は以下の流れとなる。

  1. 一覧画面: 編集ボタン選択
  2. 編集画面: 設定ボタン選択
  3. 一覧画面: ブラウザーバック
  4. 編集画面: 変数未定義エラー

一覧画面の表形式のデータから項目を選んで編集して,編集後にブラウザーバックでエラーでてしまった。

一覧画面から編集画面に遷移するにあたって,$route.push()の引数でparamsプロパティでパラメーターを引き渡していた。ブラウザーバックすると,this.$route.paramsが空になっており,変数未定義でエラーになってしまっていた。

念のため確認すると,queryプロパティでURLのクエリーとして引き渡す場合はブラウザーバックでも問題がなかった。

方法

この件については,「vue router – Trouble with routing Vue.js 2 and browser history – Stack Overflow」でほぼ同じ問題が報告されていた。

こちらの回答が原因と対策を説明していて助けられた。

まず原因としては,Webブラウザーのhistory APIを使用すると$route.paramsのパラメーターを引き継ぐことができない。引き継ぐ場合は,明示的にrouter-link$routeのAPIを呼び出す必要がある。

対策は以下の2種類となる。

  1. URLクエリーにパラメーターを含める ($route.queryプロパティを利用)。
  2. Vuexなどで状態を保持。

パスワードなど,URLに表示されてはまずいデータもある。どうしてもやりたい場合,少々面倒くさいがVuexを使うのがベストになるだろう。

原因と対策を記したが,今回は全く区別の方法で解決した。

そもそも,一覧画面から編集画面への遷移で全パラメーターを引き継ぐ必要はない。ユーザー名だけURLクエリーで引き渡して,画面遷移時にユーザー名を使ってAPIから指定したユーザーのデータを取得すればいい。

こうすることで,ブラウザーバックしてもURLクエリーでユーザー名を常に引き継ぐことができ,ユーザー名から残りのデータを取得できる。これにより解決した。

結論

Webアプリケーション開発でよくあるCRUD処理での問題とその解決方法を記した。

Webアプリ開発はあまり慣れておらず,今後もこういう問題に出くわすだろう。忘れないうちに,メモを残して蓄積したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です