在vue中碰到了需要刷新當(dāng)前頁面的需求,雖然可以使用this.$router.go(0);
和location.reload()
像f5一樣刷新,但是不太好
這里推薦一種方式,是我之前遇到這方面的需求,在 segmentfault上提問獲得的解決方案
現(xiàn)將方案分享出來
此方法是基于進入空白頁再在空白頁跳轉(zhuǎn)回到上一個頁面的原理實現(xiàn)的,
首先空白頁中代碼這樣寫,即在beforeRouteEnter
中獲取到上一個路由,直接跳轉(zhuǎn)回去
// refresh.vue
<script>
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
}
</script>
在需要刷新的頁面中通過this.$router.replace
跳轉(zhuǎn)到空白頁
// 使用頁面
refresh () {
this.$router.replace({
path: '/refresh',
query: {
t: Date.now()
}
})
}
這樣,就實現(xiàn)了刷新當(dāng)前路由的需求了