Vue项目保存代码之后页面自动更新问题
更新时间：2023年10月08日 16:47:50 作者：satuo@
这篇文章主要介绍了Vue项目保存代码之后页面自动更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue项目保存代码之后页面自动更新
想要在代码中保存之后，页面自动刷新。
命令行敲如下代码
npm install webpack-dev-server
下载了这个东西就不用每次都手动刷新了，我也不知道这个是干嘛的，留在以后研究研究！
Vue项目刷新当前页面最优解决
一般刷新页面可以用location.reload(true)，history.go(0) 等方法，但是这对vue项目很不友好，会是页面重新加载，出现暂时性的空白，而且耗费性能，所以vue项目最好不用这些方法.vue有this.$forceUpdate()可以强制更新，
下面介绍其他一种更好的方法。
通过v-if的功能触发页面刷新，结合provide和inject
<template>
<div id="app">
<router-view v-if="isShow"></router-view>
</div>
</template><script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isShow: true
}
},
methods: {
reload () {
this.isShow= false
this.$nextTick(function () {
this.isShow= true
})
}
}
}
</script>在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面
export default {
name: "demo",
inject:['reload'],
data() {
return {
}
},
methods: {
reflesh(){
this.reload()
},
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架,下面这篇文章主要给大家分享介绍了几个可以助你提高效率的Vue指令,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue实现登录功能的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了Vue-Router如何动态更改当前页url query问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
对于vue下的双向绑定功能，个人理解为在处理逻辑的过程中缓存了大量的node对象，node对象可以是html标签、文本内容。既然选择了缓存这些对象，那么在用的过程中哪里需要改变就把node拿出来，进行标签属性的变更或者文本内容的修改。本文主要讲了如何实现双向绑定2021-06-06
在需求开发阶段,鉴于项目采用了antd作为基础组件库,确保组件外观与antd一致变得尤为重要,这包括颜色、字体大小及尺寸等样式的统一,然而,截至当前antd-vue尚未实现这一便捷的CSS变量特性,但理解其背后的实现机制后,我们可以自行构建这一功能,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vuejs如何清空表单数据、删除对象中的空属性公共方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了vue项目启动后没有局域网地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍vscode中 vue项目es-lint的配置方法，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下吧2018-07-07
vue中watch和computed为什么能监听到数据的改变以及不同之处
这篇文章主要介绍了vue中watch和computed为什么能监听到数据的改变以及不同之处,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
最新评论