18
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Vue Router/router-link/this.$router.push】パスが同じでクエリパラメータが異なるURLへの移動時に再描画されない

Posted at

クエリパラメータのみが異なるURL間のthis.$router.push

下記のような例の時に、/userの画面のインスタンスが再利用されるため、
うまく再読み込みできませんでした。
理由がわからず詰まってたところ、公式ドキュメントに記載がありました。

上記「公式ドキュメント」の「パラメーター変更の検知」のところに記載があります。

index.vue

  // 現在のパスが、「/user?id=1」の時に、下記のpushが行われた時
  methods: {
    clickAge: function (age) {
    // このthis.$router.pushでは/user画面の再描画がされない
      this.$router.push({ path:'/user', query: { age } })
    }
  }

パラメータ変更のみのthis.$router.pushの時にも再読み込みをしたい場合

上記「公式ドキュメント」の「パラメーター変更の検知」の部分に対応策が載っていますので、
ご覧ください。

参考URL

公式ドキュメント Vue Router | 動的ルートマッチング
 ※上記「公式ドキュメント」と同じURLです。

18
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?