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

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

前提条件

• vue : 2.6.14
• nuxt : 2.15.8

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

実現方法

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

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

実装サンプル

WindowReload.vue

template タグ部分

<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 = ''
      }
    },
  },
}

最後に

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

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