vueのrouter-linkは、現在表示しているページと同じ遷移先の
リンクをクリックしても遷移してくれません。
とはいえ、画面がstateを管理していたりすると、
同じリンクだとしても遷移するような動きが必要なときがあります。
今回その課題に直面し、解決したので備忘録。
router-link
router-linkはこんな感じ。
|
1 2 3 4 5 6 |
<router-link :to="[遷移先パス]" :class="groupItem.class" @click.native="refreshIfSameRoute([遷移先パス])"> // ← 自作関数 [表示項目名] </router-link> |
遷移判断関数
|
1 2 3 4 5 6 7 |
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を渡すことで遷移させることができるようになります。
関数の最後に遷移の有無に関わらず、
パス比較用変数に引数の遷移先パスを格納しておくことで、
違うパスであれば、普通の遷移を行うように処理させます。
以上です。
それでは！！！
20代前半までは東京で音楽をやりながら両手の指以上の業種でアルバイト生活をしていましたが、某大手プロバイダのテレアポのバイトでPCの知識の無さに愕然とし、コンピュータをもっと知りたい！と思ったことをきっかけに25歳の時にITの世界に未経験で飛び込みました。
紆余曲折を経て、現在は個人事業主としてお仕事させていただいており、10年ほどになります。
web制作から企業システム構築、ツール開発など、フロントエンドもバックエンドもサーバーもDBAも依頼があれば何でもやってきた雑食系エンジニアです。
今風にいうとフルスタックエンジニアということになるのかしら？？
→ 詳細プロフィールというか、生い立ちはこちら
→スキルシートをご覧になる場合はこちら
→お仕事のご依頼やお見積りなどお問い合わせはこちらから！