Vuetify.jsのリンクの違いについて

概要

vuetifyのbuttonやlist-itemなどに対してnuxt linkをつける際にリンクの付け方は2つある

• href
• to

どう使い分けるかというと、 https://qiita.com/white0221/items/ad4136cf2b80eda2509f の記事の通り外部リンク、内部リンクかで使い分けるというのが正しい。

どういうことが起きるのか

toの場合

<template>
    <v-btn link nuxt to="/shop/test">
      商品ページに遷移する
    </v-btn>
    <v-btn link nuxt to="http://google.com">
      googleに遷移する（できないけど
    </v-btn>
</template>

上のリンクは http://localhost:3000/shop/test に遷移する
下のリンクは http://localhost:3000/http:/google.com に遷移する
つまり「同じドメイン内」での絶対パス、相対パスによる遷移。（言葉としては確かに内部リンク

hrefの場合

<template>
    <v-btn link nuxt href="/shop/test">
      商品ページに遷移する
    </v-btn>
    <v-btn link nuxt href="http://google.com">
      googleに遷移する
    </v-btn>
</template>

上のリンクは http://localhost:3000/shop/test に遷移する
下のリンクは http://google.com に遷移する
つまりよくあるhrefでの遷移。（言葉としては確かに外部リンク

これがどういうことかというと、以下のようにnuxtのmiddlewareにfirebase authを噛ませてリダイレクトしていたとする。

import * as firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  const firebaseConfig = { }
  firebase.initializeApp(firebaseConfig)
}

const auth = firebase.auth()

export default function({ route, redirect }) {
  auth.onAuthStateChanged(user => {
    if (!user && route.name !== 'login') {
      redirect(`/login`)
    }
  })
}

このとき上のリンクで http://localhost:3000/shop/test にアクセスした場合は、firebase authのlogin情報が一旦消えるので、必ずloginに飛ぶ。
大半はそれが嫌なのでtoでリンクするのが正しい。

まとめ

気づいたらアタリマエのことではあるが、何も知らないとハマるともわれ。
ちなみに、buttonにはtoの代わりに、replaceもあるので、使い方をきちんと見極める必要がある。