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执行流程及渲染示例解析
这篇文章主要为大家介绍了Vue执行流程及渲染解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
VUE学习宝典之vue-dialog使用方法
在Vue中dialog对话框是一种常见的组件,用于在用户与应用程序进行交互时显示信息或收集输入,这篇文章主要给大家介绍了关于VUE学习宝典之vue-dialog使用方法的相关资料,需要的朋友可以参考下
2024-05-05
vue实现登录页面的验证码以及验证过程解析(面向新手)
这篇文章主要介绍了vue实现登录页面的验证码以及验证过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
Vue router重定向redirect如何传值问题
这篇文章主要介绍了Vue router重定向redirect如何传值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vscode中vue-cli项目es-lint的配置方法
本文主要介绍vscode中 vue项目es-lint的配置方法，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下吧
2018-07-07
Vuex中actions的使用教程详解
actions作为Vuex的五大核心之一，它的属性是用来处理异步方法的，通过提交mutations实现。本文将具体介绍一下actions的使用教程，需要的可以参考一下
2022-01-01
iView-admin 动态路由问题的解决方法
这篇文章主要介绍了iView-admin 动态路由问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-10-10
vite+vue3项目集成ESLint与prettier的过程详解
这篇文章主要介绍了vite+vue3项目中集成ESLint与prettier的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
Vue 中的 deep、v-deep 和 >>>区别解析
文章主要介绍了在Vue中使用UI库时,如何通过样式穿透（style penetration）来修改子组件的样式,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2026-02-02
Vue父子组件元素获取方法互相调用示例详解
这篇文章主要为大家介绍了Vue父子组件元素获取方法互相调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-09-09