Vue.jsでページ切り替え後もデータを保持したい

Question

やりたいこと

・1ページ目にA, B, Cのボタン3つを用意し、どのボタンを押しても2ページ目に遷移する。
・2ページ目にはそれぞれa, b, cと書かれた３つのタブを用意する
・Aボタンが押された時はaタブがアクティブに、Bボタンが押された時はbタブがアクティブに...としたい

書いたコード

このような仕組みを作成したいのですが、可能でしょうか。

data: {
　　isSelected: "A"
}

<a v-on:click="isSelected = 'B'" href="page2.html">ボタンB</a>

この時に、ページを遷移するとvue.jsのdataがリセットされ、
isSelectedはBからAに戻ってしまいます。

解決方法をお願いします

戻らないように、データを引き継ぐ方法があれば教えていただけると感謝です。
またそれ以外の方法でもこの仕掛けを実現可能という方がいらっしゃれば、合わせてご教授いただけると幸いです。
よろしくお願いします。

Answer 1

私も初心者です.
pageが異なるなら2つの方法しか思いつきません.

1:2ページ目から遷移するときに,emitでBを渡す.
1ページ目はdataからpropでもらう.
初期が1ページ目ならpropのオプションでデフォルトをAを設定しておく.

2:vuexを導入してstoreに持つ.

以上.参考になれば幸いです.

Comments

[jeq]

ありがとうございます！
参考になりました。

Answer 2

いただいた要件であれば、Vuexを使うのが一番良いでしょう。私なら次のようにすると思います。

1. VuexにtabValueなどといったstateを持つ
2. Aタブがクリックされたときは値aを引数にとり、mutationを実行するメソッドを呼び出す

（Bタブの場合は値bを引数にする）
3. getterでtabValueの値を取得し、それに応じてアクティブにするタブを決める処理を書く

Comments

[jeq]

ありがとうございます！
参考になりました。