精华内容
下载资源
问答
  • Vue添加自动刷新功能

    千次阅读 2020-06-01 10:08:56
    在实际开发中,当页对数据库进行增删改的过程中,vue不会对DOM进行渲染,因此要用刷新来重新查询显示这些数据。         解决方法就是用provide / inject 组合,其作用是...

    前言
            在实际开发中,当页对数据库进行增删改的过程中,vue不会对DOM进行渲染,因此要用刷新来重新查询显示这些数据。
            解决方法就是用provide / inject 组合,其作用是允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,在上下游关系成立的时间里始终生效。因此会想到App.vue是所有页面的父组件及组件的祖先组件,所以肯定跟App.vue有关系。

    解决方案

            打开App.vue : 声明reload方法,控制router的显示或隐藏,从而控制页面的再次加载。

    <!--App.vue-->
    <template>
      <div id="app">
      	<!--添加判断条件-->
        <router-view v-if="isRouterAlive" />
      </div>
    </template>
    <script>
    	export default{
    		name:'app',
    		provide(){//全局注册方法
    	      return{
    	        reload:this.reload
    	      }
    	    },
    	    data(){
    	      return{
    	        isRouterAlive:true,//显示状态
    	      }
        	},
        	methods:{
    	      reload(){
    	        this.isRouterAlive = false;
    	        this.$nextTick(function(){
    	          this.isRouterAlive = true ;
    	        })
    	      },
    	    
        	}
    	}
    </script>
    

            子孙组件:
                    利用 inject 在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑代码完成后(增删改)直接this.reload(); 调用即可刷新当前页面。

    <script>
    	
    	export default{
    		name:'home',
    		inject:['reload']//在根节点上写
    		methods:{
    			deleteStudent(){
    				//...请求后台进行删除操作
    				//刷新页面
    				this.reload();
    			}
    		}
    	}
    </script>
    
    展开全文
  • 问题通常在后台管理项目中,对数据进行增删改查是常规操作。在进行这些操作后,需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后...3.重新调用接口:但性能较差,代码冗长。4...

    问题

    通常在后台管理项目中,对数据进行增删改查是常规操作。在进行这些操作后,需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

    解决方案 || 以删除为例:

    1.强制刷新:this.$forceUpdate()

    2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁。

    3.重新调用接口:但性能较差,代码冗长。

    4.provide / inject :(推荐)

    允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

    首先在App.vue全局设置provide

    在需要刷新的操作页面内注入inject:[‘reload']

    在调用接口操作成功后 this.reload( )

    比如在删除接口调用成功后:

    划重点

    provide:一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

    inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名。

    $nextTick(点击查看vue相关文档)

    除此之外,provide和inject的用法主要是:在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

    需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

    补充知识:vue主动刷新页面及列表数据删除后的刷新方法

    1.场景

    在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

    2.遇到的问题

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

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

    3.解决方法

    provide / inject 组合

    作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

    App.vue:

    声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

    tableList.vue:

    在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

    4.provide / inject 用法

    provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

    inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

    提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

    深入理解数据驱动

    以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重。

    1. 获取列表方法

    2.重新获取数据

    3.这样再次调用获取数据,即可同步实现页面数据更新(不会重新刷新页面),同时保证有分页时,能够停留在当前页(刷新前如果是第二页,刷新后依然在第二页),

    即其他查询条件保持不变,体验效果好!

    以上这篇vue实现在进行增删改操作后刷新页面就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • vue项目部署到nginx上,如果是第一次往nginx上部署vue项目,本地项目无需修改,只需要修改nginx上的配置,当需要在nginx上部署多个vue项目时,则本地vue项目需要做配置…(详情省略,具体我的文章有),其中一项是...

    前言

    别人认为重要的,并不就是你的追求。只有自己才知道什么最合适。

    问题由来~及描述

    • 将vue项目部署到nginx上,如果是第一次往nginx上部署vue项目,本地项目无需修改,只需要修改nginx上的配置,当需要在nginx上部署多个vue项目时,则本地vue项目需要做配置…(详情省略,具体我的文章有),其中一项是在项目的根路径,创建了vue.config.js文件。
    • 1.第一次配置的:vue.config.js
      在这里插入图片描述
    • 2.线上是没有任何问题,但是本地项目重启后(vue.config.js只有在项目重启后,才会被 @vue/cli-service 自动加载)进行代码修改后,浏览器上的页面没有自动刷新?手动点击刷新,然后页面出现空白, 为什么?打开控制台,报:Uncaught SyntaxError: Unexpected token ‘<’

    解决

    • 在网上找了相关文章,和我的场景不一样,但是好歹有个思路,就是路径问题,我想到我之前,在publicPath=‘/’ 好像没出现代码修改后无法刷新,对比现在~’./'加了一个点,代表的意思不是一样的吗? 幸好尝试了,成功了。

    1. 修改vue.config.js中的路径后(如下图),将项目进行重启(文件只有启动才会被重新加载),启动成功后,修改某个页面内的代码并保存,页面就有自动刷新的效果了。
    在这里插入图片描述
    2.知识补充:(自己的误区:我以为1和3代表的都是当前目录呢)
    在这里插入图片描述

    展开全文
  • 各位大佬们知道,vue 项目 修改页面内容ctrl +s 保存后,页面不能及时刷新,只能手动刷新。不知道大家有没有遇到这种情况? 前段时间 重新安装了 nodejs10 其他没什么改动,请问大佬们是那一部分出了问题?? ...
  • vue 修改数据刷新页面

    千次阅读 2019-05-24 14:18:42
    vue 项目中,如果更新一条数据,需要页面刷新下,如果用 this.$router.go(0),页面会短暂空白,体验十分不好。此时运用provide/inject 来局部刷新页面。 1.父组件中,定义reload 方法,其中有一个 isRouterAlive...

    vue 项目中,如果更新一条数据,需要页面刷新下,如果用 this.$router.go(0),页面会短暂空白,体验十分不好。此时运用provide/inject 来局部刷新页面。

    1.父组件中,定义reload 方法,其中有一个 isRouterAlive变量,定义在data中。

    2.定义 provide,代码如下

    export default {
        provide(){
          return{
            reload:this.reload
          }
        },
        data() {
          return {
            isRouterAlive: true,
          };
        },
        methods: {
          reload(){
              this.isRouterAlive = false,
              this.$nextTick(function(){
                this.isRouterAlive = true;
              })
          }
          
        },

    3.在router-view中加v-if

        <router-view v-if="isRouterAlive"></router-view>

    4.在需要运用局部刷新的子组件中,定义inject

     export default {
        inject:['reload'],
    }

    5.在需要刷新的地方 使用 this.reload(),例:

     deleteUser(id,status) {
              this.$Axios.post('user/updateStatus',{'userId':id,'status':status},res=>{
                this.reload();
                this.$message({
                message:res.data.msg,
                type: 'success'
              });
            })
          },

     

    展开全文
  • Vue 文件保存后,浏览器不自动刷新

    千次阅读 2021-01-23 13:15:03
    Vue 文件保存后,浏览器不自动刷新 在VScode中,需要保存文件后自动刷新浏览器的内容,否则还得手动刷新浏览器,给开发造成极大的不便。我们要在项目根目录下找到vue.config.js(若没有这个文件,则新建一个),增加...
  • vue-cli3热更新配置,解决热更新失败的问题,保存代码浏览器自动刷新
  • 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定...
  • 但是虽然学习简单,上手操作那可是处处大坑啊今天小编就来说手VUE与ElementUI整合的一些坑大坑一VUE刷新页面后导航栏的已选中被重置大家都知道ElementUi的导航栏组件会有一个默认选中的标签,我们可以通过鼠标点击来...
  • 在VScode中,需要保存文件后自动刷新浏览器的内容,否则还得手动刷新浏览器,给开发造成极大的不便。我们要在项目根目录下找到vue.config.js(若没有这个文件,则新建一个),增加 hot: true。 module.exports = { ...
  • 启用webpack-dev-server的hot,修改样式的话页面自动刷新时,vue的data数据不会丢失 主要3句代码 const HtmlWebpackPlugin = require(‘html-webpack-plugin’) hot:true new webpack.HotModuleReplacementPlugin() ...
  • 管理-设置-搜索auto save,修改off为afterDelay即可。如下图:
  • 1.整体代码 <div> <cube-upload ref="upload" v-model="files" :action="action" @files-added="addedHandler" @file-error="errHandler"> <div class="clear-fix"> <cube-upload-file...
  • vue 数据修改但页面没刷新 1.watch监听到数据的变化但页面没有刷新 在数据改动的代码后加 this.$forceUpdate(); 添加this.$forceUpdate();进行强制渲染,效果实现。因为数据层次太多,render函数没有自动更新,需...
  • 最近在Visual Studio中写Vue代码出现了一个很难受的问题,就是在项目中修改任意代码后,都会重新编译严重影响开发效率,而不是以前按保存后(ctrl + s)才会重新编译。 稍微修改一下自己的代码,就会重新编译 找了...
  • vue中如何实现局部刷新效果

    千次阅读 2021-01-09 12:59:44
    response => { endLoading() return response }, error => { endLoading() Message.error(error.response.data) return Promise.reject(error) }) export default axios main.js中引入http.js并绑定在vue上 import ...
  • 因为引入cdn后加载超时了 本地引入就好了
  • Vue实现关闭对话框后刷新列表

    千次阅读 2020-12-25 09:37:15
    有些场景需要实现用户弹窗确定后自动刷新列表,父窗口绑定fevent即可 父窗口代码 <template> <div> <el-button @click="$refs.editform.dialogFormVisible = true" >编辑用户</el-button&...
  • 这是第二次修改vue代码后不起作用了,不知道idea2019怎么搞的.删掉.idea重新导入就好了 附:要vue3.0及以上 才有public目录,2.x没有
  • 下面,我们直接看代码,这是在vue的请求拦截器里进行的相关操作: /*是否有请求正在刷新token*/ window.isRefreshing = false /*被挂起的请求数组*/ let refreshSubscribers = [] /*获取刷新token请求的token*/ ...
  • 成功登录后,我重定向如下:this.$router.push({ name: 'main' })这工作,但如果我刷新页面或尝试从URL访问它,例如http://testapp.test/main我得到错误:页面不存在404.目前我没有任何保护,以防止访问仅适用于...
  • 在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值页面初始化代码:mui.init();...
  • 问题:在使用 vue 进行开发的过程中,可能会遇到一种情况:当生成vue实例后,再次给数据赋值时,有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。vue遍历数组...
  • vue-router重新路由到当前页面,页面是不进行刷新的2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好3.解决方法provide / inject 组合作用:允许一个祖先组件向其所有...
  • 前言最近一个需求,需要在Vue 项目中加入含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案。。。。。。Vue的...
  • 在我们使用vscode写代码的时候,每次修改都要先保存,再刷新浏览器才能看到代码变动后的效果,如果只要保存,浏览器会自动刷新岂不是更好,下面这种方法就可以做到。 插件市场安装live server插件 打开文件 在...
  • 需要用到provide inject。这种方法主要是将router-view隐藏然后再...在app.vue中写入以下代码。 provide(){ return { reload:this.reload } }, 在methods中定义此方法,isRouterAlive 在data中声明 meth...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,767
精华内容 5,906
关键字:

vue修改代码自动刷新

vue 订阅