Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@1994spagetian

< nuxt-link > をpreventしたい

More than 1 year has passed since last update.

便利だけど難しい <nuxt-link>

リンクタグを自動生成してくれるわ、VueRouterの操作もよしなにやってくれるわ、とめちゃくちゃ便利な <nuxt-link>
ただちょっと細かいことをやろうとすると、少しひねくれた手段が必要になる。

例えばクリックしたとき画面遷移と同時に何かしらイベントを起こしたい場合、
そのまま普通にイベントリスナをバインドするだけではダメで、.native修飾子をつけなくてはいけない。

<!-- ダメ -->
<nuxt-link to="/hogehoge" @click="fuga"> hogefuga </nuxt-link>
<!-- 良い -->
<nuxt-link to="/hogehoge" @click.native="fuga"> hogefuga </nuxt-link>

これは<nuxt-link>がルートに<a>要素が配置されたコンポーネントとして扱われるため。

<a>タグは prevent で遷移を握りつぶせるけど...

で、今回の本題はクリックした時に処理を走らせて、本来のルーター処理を握りつぶすにはどうしたらいいか。
例えばログイン状態でないと遷移しないリンクとかを作りたい時には、標準の画面遷移処理はなかったことにしないといけない。

こういう時<a>タグで実装する場合は、.prevent修飾子を使ったり、EventインスタンスのpreventDefaultを使うと標準処理を握りつぶせる。


<!-- HTMLでprevent指定を行う -->
<a href="/hogehoge" @click.prevent="fuga"> hogefuga </a>

<script>
...
  methods: {
    fuga(e) {
      // jsでpreventする
      e.preventDefault();
    }
  }
...
</script>

ところが<nuxt-link>では上記の方法でイベントを握りつぶすことができない。
VueRouterが入っているのが原因なのだとは思うが、何とかできないだろうか?

Routerイベントのトリガーを書き換える

<nuxt-link>はVueRouterのコンポーネント<router-link>の糖衣構文なわけだが、
このコンポーネントにはeventという、Routerが何のイベントをトリガーとして処理を行うかを設定するプロパティがある。

参考: Vue Router APIリファレンス

というわけで、このトリガーに対して全く無効なイベントタイプを指定してやれば、クリックしても動かなくなるという寸法。

<!-- eventトリガに何も指定しないので、/hogehogeに遷移するRouterイベントが発生しない -->
<nuxt-link to="/hogehoge" @click.native="fuga" event=""> hogefuga </nuxt-link>

このeventプロパティを動的に指定してやることで、条件に応じたnuxt-linkの操作を行うこともできるので、
例えばログイン時には"click"、未ログイン時には""を与えるようバインドする、といった条件わけも可能である。

参考リンク

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1994spagetian
ActionScriptが滅亡しかけているのでJavaScriptに移住してきました。よくソースが絡みそうなスパゲティコードを書きます。よろしくお願いします
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?