[NuxtJS]一度だけ画面を再描画(location.reload)する

画面を一度だけlocation.reload()を使用して再描画する方法を説明します。

前提条件

vue：2.6.14
nuxt：2.15.8

こちらから今回のソースコードを確認できます。

GitHub

GitHub - koichi-ezato/nuxt-sample at window.reload

https://github.com/koichi-ezato/nuxt-sample/tree/window.reload

Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.

実現方法

画面の初期表示時にWindow名のチェックを行い、Window名が設定されていなければ、Window名を設定し、location.reloadを実行して画面をリロードします。画面がリロードされるとWindow名が設定されているので、Window名が設定されている場合、Window名を空にします。

文章で説明しても分かりにくいかもしれないので、実装サンプルを載せておきます。

実装サンプル

WindowReload.vue

<template>
  <v-card>
    <v-card-title>Window Reload</v-card-title>
  </v-card>
</template>

<script>
export default {
  name: 'WindowReload',
  mounted() {
    this.pageReload()
  },
  methods: {
    pageReload() {
      if (window.name !== 'reloaded') {
        alert('Window Reload!!')
        window.name = 'reloaded'
        location.reload()
      } else {
        window.name = ''
      }
    },
  },
}
</script>

最後に

画面をリロードすることで画面の情報をクリアするときとかに使えそうですね。あとはキャッシュを消したい場合とかにも使えるかもです。