画面を一度だけlocation.reload()
を使用して再描画する方法を説明します。
前提条件
- vue:2.6.14
- nuxt:2.15.8
こちらから今回のソースコードを確認できます。
実現方法
画面の初期表示時に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>
最後に
画面をリロードすることで画面の情報をクリアするときとかに使えそうですね。あとはキャッシュを消したい場合とかにも使えるかもです。
こちらから今回のソースコードを確認できます。