Vue项目保存代码之后页面自动更新问题
作者：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()
},
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。