在vue项目中,经常会遇到需要刷新当前页面的需求。
因为vue-router判断如果路由没有变化,是不会刷新页面获取数据的。
方式1:go(0)和reload()
通过location.reload()或是this.$router.go(0)两种强制刷新方式,相当于按F5,会出现瞬间白屏,体验差,不推荐。
推荐方式:定义一个空白路由页面,路由跳转到该空白页后立马跳回当前页,实现路由刷新。
1.在router路由表中定义一个空白路由,
// 强制刷新当前页所用的中间跳转页
{
path: '/redirect/:path*',
component: () => import('@/views/redirect/index')
}
2.写一个空白路由组件
// views/redirect/index
<script>
export default {
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function(h) {
return h() // avoid warning message
}
}
</script>
3.在需要刷新的页面使用
refresh() {
// 刷新当前路由
const { fullPath } = this.$route
this.$router.replace({
path: '/redirect' + fullPath
})
}
这种方式,基本上能够应付绝大多数情况,推荐使用。