vue项目刷新当前页面的推荐方式
在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
})
}
这种方式,基本上能够应付绝大多数情况,推荐使用。
臧伯克: 给你点赞
一只小阿焜: 如果上百万张图片的话,会不会造成一定的损耗呢? 而且你说的是webpack的使用方法,vue3+vite不支持require。 如果有后台的话,考虑是不是将图片转成base64编码更合适?(这点我也不是很清楚)
codeBoy_chen: 把需要动态导入的图片放入public文件夹中require返回的时候使用replace('/public', '')将'/public'去掉这样生产环境跟开发环境都能显示了
剑宇宝宝的小熊: 哥哥好棒哦
从不敲代码: 用第一个会报 landResource.vue:202 Uncaught (in promise) RangeError: Maximum call stack size exceeded at Array.forEach (<anonymous>) at transListDataToTreeData 怎么解决呢