精华内容
下载资源
问答
  • vue自动刷新页面
    2021-12-24 15:11:35

    https://www.cnblogs.com/yinn/p/9056731.html

    更多相关内容
  • 今天小编就为大家分享一篇Vue刷新修改页面中数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue自动刷新

    2021-11-07 23:36:36
    这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。 2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来...

    1.window.location.reload(),是原生JS提供的方法,

    this.$router.go(0):是vue路由里面的一种方法,

    这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。

    2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来(个人感觉比较麻烦,不实用)

    3.控制<router-view></router-view>的显示与否,在全局组件注册一个方法,该方法控制router-view的显示与否,在子组件调用即可:

    provide / inject 组合 方式感觉比较好用,相对的比前面几种方法好用

    (1)先修改App.vue

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
      </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>
    展开全文
  • vue中如何使页面自动刷新

    千次阅读 2020-10-15 22:37:11
    vue如今是十分常用的前端框架,而我们在使用vue框架时总会碰到一个问题,那就是进行完所需要的操作以后如何进行页面自动刷新,以下就来说一说几种方法: 一. window.location.reload(),是原生JS提供的方法, this.$...

    vue如今是十分常用的前端框架,而我们在使用vue框架时总会碰到一个问题,那就是进行完所需要的操作以后如何进行页面自动刷新,以下就来说一说几种方法:
    一. window.location.reload(),是原生JS提供的方法,

    this.$router.go(0):是vue路由里面的一种方法,
    这两种方法简单粗暴,不过有一个缺点就是,它们相当于整个页面重新刷新,这样便会出现几秒的空白页,可能会使用户感受不加。

    二.控制的显示与否,在全局组件注册一个方法,该方法控制router-view的显示与否,在子组件调用即可:
    (1)先修改App.vue

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
      </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>
    

    在这里我们需要注意,有些App.vue页面中已有<router-view v-if="isRouterAlive"></router-view>
    那便不需要重复声明。

    (2) 在当前需要刷新的页面

    <template>
        <div>
        </div>
    </template>
     
    <script>
        export default{
            inject: ['reload'], // 引入方法
            data(){
                return{
                }
            },
            mounted(){
           this.reload()  // 哪里需要在哪里调用
            },
            methods:{}
        }
    </script>
    

    这样子就相当于局部小页面刷新了,而且不会出现空白页面的跳转期,个人认为这是一个十分不错的方法。

    展开全文
  • vue项目刷新当前页面的方法

    千次阅读 2021-06-09 11:32:57
    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定...

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:

    41f7ff93d69e376db189c5a719760bc4.png

    如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下

    那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上

    这时候我们最直接的思维就是想到下面这种:

    bf6be58c1dc33b67954b39d40cbb3a11.png

    但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!

    下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:

    1、最直接整个页面重新刷新:

    06180a25178abd8fe5590482da1b2d8e.png

    location. reload()

    this.$router.go(0)

    这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好

    2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来

    a414ed095f5495029a4db6f149e1d5f7.png

    空白页supplierAllBack.vue里面的内容:

    11add9f10f360cf7c8e52195bd5b1852.png

    这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用

    3、provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue

    af31d756b3862dbcac989c14863f9a27.png

    通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了

    isRouterAlive //true or false 来控制

    然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

    01fc7d3d37d58e8079e2e8afb6d7e4f0.png

    总结

    以上所述是小编给大家介绍的vue项目刷新当前页面的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

    展开全文
  • 一、浏览器刷新: location.reload(); // 或者 window.location.reload(); 二....this.$router.go(0); 这两个强制刷新页面,会有白屏...三、自动刷新: 如果一定要在created 或 mounted中,一进入页面就刷新的,那么需
  • 'userInfo'}) } }, created(){ this.initData() this.initTimer() this.setPageChage() }, data(){ return { timer:null,//定时器 } }, methods: { // 5秒刷新数据 initTimer(){ this.timer = setInterval(()=>{ ...
  • vue网站实时自动刷新

    2021-06-22 15:32:40
    问题:在使用vs code ,更新并保存vue代码,网页界面...(vue网站实时自动刷新) Type:热更新 解决方法: 1、开启自动保存,File->Auto save; 2、VS code软件里打开View->Extensions,下载插件Live Server. ...
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2021-08-16 19:00:47
    一、通过js原始方法刷新 <template> <div>...刷新页面</button> </div> </div> </template> <script> export default { data(){ return{ } }, methods
  • 关于vue页面如何自动刷新

    千次阅读 2020-12-01 11:46:06
    这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。 2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来...
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2019-06-08 10:54:18
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: location.reload(); vue自带的路由跳转: ...
  • 下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue通过路由实现页面刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要为大家详细介绍了vue实现页面滚动到底部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在头部组件里面控制导航高亮显示是checked,默认值是0,触发点击事件会重新赋值,跳转路由,当刷新页面,checked值是0,所以要监听checked时刻发生变化;利用到vue的父子和子父传值;监听状态的变化 子页面将值传给父...
  • 关于vue页面自动刷新的解决provide / inject 组合 1.修改你的app.vue,通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了 isRouterAlive //true or false 来控制 <template&...
  • vue返回刷新页面

    2021-09-02 15:14:16
    beforeRouteEnter(to, from, next) { console.log(to) console.log(from) if ...import('@/pages/selectMaterial/index.vue'), meta: { title: '主材预算', keepAlive:true, isBack:false } }, app.vue 页面
  • 代码部分: 在你需求的局部标签上加 ...局部刷新</i> js部分 data:[ updata:true ] 点击触发“ classbox(item,index){ this.updata=false this.updata=true console.log(this.biaobalist) ...
  • 根目录找到vue.config.js文件, 加以下代码: const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)  css: { // 是否使用css分离插件 ExtractTextPlugin extract: IS_PROD, // 开启 ...
  • 我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下。 思路 其实...
  • vue项目如何刷新当前页面

    万次阅读 多人点赞 2018-05-27 11:19:33
    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定...
  • Vue2页面刷新

    2021-10-27 16:12:09
    router刷新 这种方法页面会一瞬间的白屏 this.$router.go(0) location 这种也是一样,画面一闪 location.reload() 以上整个浏览器进行了重新加载,闪烁,体验不好 provide/inject 允许一个祖先组件向其所有子孙...
  • vue3实现页面刷新

    千次阅读 2021-11-26 11:25:24
    在muuri的复杂实现中,拖动元素后,只能刷新页面才能重置回初始状态 在组件中实现页面的刷新功能 //App.vue页面 //html: <template> <HelloWorld v-if="isRouterAlive"></HelloWorld> </...
  • vue项目,当刷新页面或者切换到新路由时,想要页面滚到顶部,可以使用vue-router中的scrollBehavior 方法来实现 具体实现: 在router.js中写入以下代码: import Vue from 'vue'; import Router from 'vue-router'; ...
  • VUE实现router路由跳转后自动刷新一次页面
  • vue
  • vue项目刷新当前页面的三种方法

    万次阅读 多人点赞 2022-03-06 11:49:09
    本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下。 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望...
  • vue页面刷新

    2022-03-09 20:03:42
    1.在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。 <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> ....
  • <body>...-- {{}}就是插值语法相当于模板字符串${}可以直观地把数据放在页面中 --> <p>9*9={{9*9}}</p> <p>salary:{{salary}}</p> </div> <!-- vue
  • 网上关于开发时热更新的文章很多,但实现过程都非常麻烦。下午在github上找到了一种成本...最后,重启应用,尝试更改html等静态文件,窗口就能自动刷新了。 还可以修改配置对象,开启debug模式: 作者:mrhaoxiaojun

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,429
精华内容 10,171
关键字:

vue自动刷新页面

友情链接: ENET_ECHO.rar