nuxt-linkで今いるページと同じURLを叩いた時に何も起きないので、その時はイベントが実行されるようなコンポーネントを作る

#始めに
タイトルの通りですが、nuxt-linkで同じURLへのリンクは押しても何も変化が起きません。
調べていないですがrouter-linkでも同じことかもしれないです。

移動しないならば移動しないで何かしらイベントなり出してくれれば強制的にリロードしたり、データの再取得だけ行ったりとか出来るのですがそれも無いようなので、イベントを出してくれるコンポーネントを作ってみました。

router.pushを使えばまぁ楽なのですが、なるべくaタグにしたいなと思った結果です。

#コード

<template>
  <component :is="rootTagName" :to="to" @click="click()">
    <slot/>
  </component>
</template>

<script>
import _ from 'lodash'

export default {
  props:{
    to:{
      type:[String,Object],
      default: ''
    }
  },
  computed:{
    isSameUrl(){

      const current = this.$route
      const to = this.$router.resolve(this.to).route

      return (
        current.name === to.name &&
        current.hash === to.hash &&
        _.isEqual(current.params,to.params) &&
        _.isEqual(current.query,to.query)
      )

    },
    rootTagName(){
      return this.isSameUrl ? 'span' : 'nuxt-link'
    }
  },
  methods:{
    click(){
      this.$emit('sameurl')
    }
  }
}
</script>

#かなり軽い説明
同URLの時はsameurlがemitされるようにしています。

同URLの時はspanタグに切り替えている理由ですが、
nuxt-linkにつけたclick.nativeの実行タイミングがかなり遅くて移動後の値がとれてしまい、常時同URLという判定になったりしていました。
なのでspanタグにしてclickをつける形にしました。こうすればnuxt-linkになってる時はイベントが走らないので同URLの時だけイベントが走るようになります。

#終わりに
もっといい方法がきっとあると思うので知りたいです。