【vue-router】router-linkで同じリンクへ強制遷移

vueのrouter-linkは、現在表示しているページと同じ遷移先の

リンクをクリックしても遷移してくれません。

 

とはいえ、画面がstateを管理していたりすると、

同じリンクだとしても遷移するような動きが必要なときがあります。

 

今回その課題に直面し、解決したので備忘録。

 

 

 

 

 

 

 

router-link

router-linkはこんな感じ。

<router-link
  :to="[遷移先パス]"
  :class="groupItem.class"
  @click.native="refreshIfSameRoute([遷移先パス])"> // ← 自作関数
　[表示項目名]
</router-link>

 

 

遷移判断関数

refreshIfSameRoute(to_path) {
　// 現在ページと遷移先ページが同じ場合、リロードさせる
  if (to_path == this.before_route) { // ← before_routeという変数を定義しておく
    this.$router.push({ path: to_path, query: { type: 0 } });
  }
  this.before_route = to_path;
}

 

 

解説

まずrouter-linkでもclickイベントを@click.nativeで発火させるようにします。

そのイベント関数には遷移しようとするパスを渡します。

 

イベント関数では、移動前パスと遷移先パスを比較。

同じであればrouter.pushします。

 

このときのポイントはqueryを必要なくても渡すことです。

渡さずパスだけだと、same routeでExceptionになってしまいます。

が、queryを渡すことで遷移させることができるようになります。

 

関数の最後に遷移の有無に関わらず、

パス比較用変数に引数の遷移先パスを格納しておくことで、

違うパスであれば、普通の遷移を行うように処理させます。

以上です。

 

 

それでは！！！

 

 

にほんブログ村

人気ブログランキング