質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2990閲覧

【Vue.js】ブラウザバックで任意の画面に戻りたい

tenten11055

総合スコア67

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/03/02 18:03

#やりたいこと
クエリの中に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)でまたクエリは消える)、登録画面に戻りたいのにトーストが表示される一覧画面がまた表示されてしまいます。
当然といえば当然なのかもしれませんが、うまい方法が見つかりません。。
教えていただけると助かります。宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

methods: { //URLからトーストのクエリを削除して、再び一覧画面に遷移 replaceDeletedToast (path) { let query = Object.assign({}, this.$route.query) delete query['toast_type'] this.$router.replace({path: path, query: query}) } },

replaceにしたら期待する動作になりました。
replaceは遷移の履歴を残さないようです。

投稿2020/03/03 04:56

tenten11055

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問