画面遷移後の動きを条件分岐させたい

メニューバーから遷移した時と他ページから遷移した時の画面の動きを変えたい

二つのページAとBがあります。
AのモーダルからB画面へ遷移ボタンを押したときBのモーダルがデフォルトで表示されているようにしています。
現状ですと、Bのページにメニューバーから遷移した時もモーダルが出てきてしまいます。

AモーダルからBへ遷移するときは、モーダルを表示
それ以外は、モーダルを表示させたくありません。

遷移の仕方で条件分岐して表示の仕方を変えたいのですが、AからBへ移った時と、メニューバーからBを開いた時、どのように書けばいいのかわかりません。
具体的には、条件式の部分が思いつきません。

例えば、メニューバーから、遷移した時は~~と書きたいのですが、そんな書き方はできるのでしょうか？？

AからBへの遷移時は、push遷移です。

A Modal.vue↓

A
1 <add-button @click="locate">
2    <template v-slot:icon>
3         <b-icon icon="arrow-up-right-square" />
4     </template>
5         Bモーダルへ
6  </add-button>

A Modal.vue JS↓

A
1 locate() {
2    this.$router.push('./B画面')
3  }

B index.vue↓

B
1 mounted() {
2    this.$nextTick(() => {
3      const element = document.getElementById('addset')
4      if (!element) {
5        return
6      }
7      element.click()
8    })
9  }

B index.vueで、addsetボタンを押すとモーダルが表示されるのでそれを利用して、DOM作成後にボタンを押すようにしています。
この処理を条件分岐でtrue falseに分けたいと考えています。

vueとnuxtで書いてます。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

クエリパラメータを使われてはいかがでしょうか？

diff
1/// A Modal.vue ///
2
3  locate() {
4-   this.$router.push('./B画面')
5+   // query を指定すると /B画面?hoge=1 というURLになる
6+   this.$router.push({ path: './B画面', query: { hoge: '1' } })
7  }

diff
1/// B index.vue ///
2
3  mounted() {
4    this.$nextTick(() => {
5+     // URL の「?」以降の部分（クエリパラメータ）を取得する。
6+     // hoge パラメータが存在しなければ何もしない。
7+     if (!this.$route.query.hoge) {
8+       return
9+     }
10
11      const element = document.getElementById('addset')
12      if (!element) {
13        return
14      }
15      element.click()
16    })
17  }