#やりたいこと
クエリの中にtoast_type
があった場合に、watchでトースト表示の処理
↓
toast_type
をURLから消したいので、それ用のメソッドを処理の最後に発動
↓
ブラウザバックすると、ちゃんと前の画面に戻る
#現状
ブラウザバックするとクエリにtoast_type
があるURLが表示され、再びトーストが出てくる&画面が変わらない
#画面の構成・流れ
「登録画面」localhost/admin/hoges/new
↓ 登録ボタンを押した -> 処理の最後に this.$router.push({name: Index, query: { toast_type: 'created' }})
で一覧画面に遷移
「一覧画面でトースト表示」localhost/admin/hoges?toast_type='created'
↓ toast_type
を消す処理を行い、再度一覧画面に遷移
「一覧画面」 localhost/admin/hoges
#ソース
js
1//app.vue(親コンポーネント) 2 3 methods: { 4 //URLからトーストのクエリを削除して、再び一覧画面に遷移 5 replaceDeletedToast (path) { 6 let query = Object.assign({}, this.$route.query) 7 delete query['toast_type'] 8 this.$router.push({path: path, query: query}) 9 } 10 }, 11 12 watch: { 13 '$route': function (to, from) { 14 //クエリにtoast_typeがあればトースト表示 15 if (!!this.$route.query.toast_type){ 16 //toast_typeを見て文字列などを変えている 17 if(this.$route.query.toast_type === 'created') { 18 this.$bvToast.toast("登録しました", { 19 variant: 'success', 20 title: '完了' 21 }); 22 } else if(this.$route.query.toast_type === 'deleted') { 23 this.$bvToast.toast("削除されました", { 24 variant: 'success', 25 title: '完了' 26 }); 27 } 28 //最後にクエリからtoast_typeを削除してthis.$router.push 29 this.replaceDeletedToast(to.path); 30 } 31 } 32 }
この処理のあと、ブラウザバックするとlocalhost/admin/hoges?toast_type='created'
に戻ってしまい(最終的にthis.replaceDeletedToast(to.path)
でまたクエリは消える)、登録画面に戻りたいのにトーストが表示される一覧画面がまた表示されてしまいます。
当然といえば当然なのかもしれませんが、うまい方法が見つかりません。。
教えていただけると助かります。宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。