Vue routerのブラウザーバックによる空$route.paramsの対処方法
概要
Vue.jsを用いたCRUD開発で，編集処理後にブラウザーバック (ブラウザーの戻る) で編集画面に戻ると，$route.paramsが空で困ってしまった。
対処方法を考えたので，今後のために記録として残す。
結論としては，一覧画面から編集画面への遷移には，URLクエリーでユーザー名を引き渡すことで解決できた。
問題
問題が発生した画面遷移は以下の流れとなる。
- 一覧画面: 編集ボタン選択
- 編集画面: 設定ボタン選択
- 一覧画面: ブラウザーバック
- 編集画面: 変数未定義エラー
一覧画面の表形式のデータから項目を選んで編集して，編集後にブラウザーバックでエラーでてしまった。
一覧画面から編集画面に遷移するにあたって，$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種類となる。
- URLクエリーにパラメーターを含める (
$route.queryプロパティを利用)。 - Vuexなどで状態を保持。
パスワードなど，URLに表示されてはまずいデータもある。どうしてもやりたい場合，少々面倒くさいがVuexを使うのがベストになるだろう。
原因と対策を記したが，今回は全く区別の方法で解決した。
そもそも，一覧画面から編集画面への遷移で全パラメーターを引き継ぐ必要はない。ユーザー名だけURLクエリーで引き渡して，画面遷移時にユーザー名を使ってAPIから指定したユーザーのデータを取得すればいい。
こうすることで，ブラウザーバックしてもURLクエリーでユーザー名を常に引き継ぐことができ，ユーザー名から残りのデータを取得できる。これにより解決した。
結論
Webアプリケーション開発でよくあるCRUD処理での問題とその解決方法を記した。
Webアプリ開発はあまり慣れておらず，今後もこういう問題に出くわすだろう。忘れないうちに，メモを残して蓄積したい。
