Vue.jsの最描画について(Vue-Router)

Question

前提・実現したいこと

Vue.jsとLaravelを組み合わせてレビューサイトを作成しています。

メインのページ('/')

発生している問題・エラーメッセージ

created(){
this.getShares(),
}
メインのページ('/')にて上記のメソッドを使用しデータを取得して表示しています。
一度目の描画後、新しいレビューを投稿するページへ行き、POSTした後にrouter.push('/')でメインのページに戻るのですが新しく投稿したレビューが表示されませんでした。
なのでwatchを使用してデータの変更があった際に this.getShares()を呼び出すことで新しいレビューも画面上には描画されるようになりました。
ですがこれでは一瞬だけ以前のページが表示されてしまいますし、コンソールで(Too Many Requests)とエラーが出てしまいます。
どのように対応すればcreated(){this.getShares()}のメソッドを遷移時に毎回発火させることが可能になりますか？

  data(){
    return{
      user_id:this.$store.state.user.id,
      login:this.$store.state.auth,
      reviews_length:"",
      posteds:[],
      user_review:[],
      shares:[
      ],
    }
  },
watch:{
  shares:function(){
  this.getShares();
  },
},
  methods:{
    async getShares(){
      const sharesdata= await axios.get("https://intense-falls-67346.herokuapp.com/api"
      );
     this.shares=sharesdata.data.data;
    },
async getUserReview(){
let data=[];
const reviews= await axios.get(
"https://intense-falls-67346.herokuapp.com/api/user_review?id="+this.$store.state.user.id);
 data.push(reviews.data.data);
 this.reviews_length=data[0].length;
 this.user_review=data[0];
 }
},
  created(){
  this.getShares(),
  this.getUserReview()
  },
};

試したこと

コンポーネントの再利用をなくすため
<router-view :key="$route.fullPath"></router-view>
を使用しましたがダメでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

.then(function(){
router.push('/');
});
こちらで思い通りの挙動を行うことができました！

Comments

[mather]

ところで気になる箇所を一点指摘しますが、shares の更新をチェックしつつ、変更があったら getShares で shares を更新しているのでループに陥ってませんか？
watch:{
shares:function(){
this.getShares();
},
},
methods:{
async getShares(){
const sharesdata= await axios.get("https://intense-falls-67346.herokuapp.com/api");
this.shares=sharesdata.data.data;
},

[Toru122]

コンソールを確認してみるとループに陥っていました。
この場合はどのように記述するのが最適解でしょうか？

[mather]

shares を取得するタイミングがページ遷移になるはずなので、 watch の shares が不要なのではないでしょうか。

[Toru122]

うまく挙動しました！
ありがとうございました。

Answer 2

https://router.vuejs.org/ja/guide/advanced/data-fetching.html
こちらの「ナビゲーション後の取得」に該当しそうですね。

Comments

[Toru122]

参考にしてコードを打ちましたがやはりうまく機能しません、、、

[mather]

どのように変更しましたか？
watch に $route が追加されましたか？

[Toru122]

おはようございます！
watch: {
$route: 'getShares'
},
を記述しましたがダメでした。
試しに
watch:{
$route: function () {
console.log("遷移");
}
},
を追加してもコンソールへ何も表示されないので遷移が認識せれていないようです。