微客导航 » 文章资讯 » vue 监听窗口变化对页面部分元素重新渲染操作

vue 监听窗口变化对页面部分元素重新渲染操作

2023-07-19 18:38:03 212

问题

在处理页面重新渲染时通常的做法是：

用vue-router重新路由到当前页面，页面是不进行刷新的

采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

使用v-if重新渲染部分组件或容器

需要重新渲染的内容

...

vue监听窗口大小发生改变

使用window.addEventListener()添加resize事件监听窗口变化

newVue({
el:'#app',
data(){
return{render:true}
},
mounted(){
window.addEventListener('resize',this.reload)
},
beforeDestroy(){
window.removeEventListener('resize',this.reload)
},
methods:{
reload(){
//重新渲染
this.render=false
this.$nextTick(()=>{
this.render=true
})
}
}
})

补充知识：vue同一个路由,但参数发生变化，页面不刷新的问题（vue监听路由参数变化重新渲染页面）

我就废话不多说了，大家还是直接看代码吧~

watch:{
$route:function(newVal,oldVal){
console.log(oldVal);//oldVa上一次url
console.log(newVal);//newVal这一次的url
if(newVal!=oldVal){
this.loading();//重新调用加载函数
}
}
}

以上这篇vue监听窗口变化对页面部分元素重新渲染操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue 监听窗口变化对页面部分元素重新渲染操作

热门推荐

随机推荐