精华内容
参与话题
问答
  • 总结VUE几种页面刷新方法

    万次阅读 2018-08-09 17:40:58
    有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据。试了几种方法,以下总结: 1、this.$router.go(0) 这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事 2、location.reload() ...

    有时候在页面里做了某些操作以后,需要页面刷新一下来重新获取数据。试了几种方法,以下总结:

    1、this.$router.go(0)

    这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事

    2、location.reload()

    这种也是一样,画面一闪,效果总不是很好

    3、跳转空白页再跳回原页面

    在需要页面刷新的地方写上:this.$router.push('/emptyPage'),跳转到一个空白页。在emptyPage.vue里beforeRouteEnter 钩子里控制页面跳转,从而达到刷新的效果

    beforeRouteEnter (to, from, next) {
          next(vm => {
            vm.$router.replace(from.path)
          })
    }。

    这种画面虽不会一闪,但是能看见路由快速变化。

    4、控制<router-view>的显示隐藏

    默认<router-view v-if="isRouterAlive" />isRouterAlive肯定是true,在需要刷新的时候把这个值设为false,接着再重新设为true:

    this.isRouterAlive = false
    this.$nextTick(function () {
      this.isRouterAlive = true
    })

    这种方法从画面上是看不出破绽的。也可以搭配provide、inject使用。例如:

    然后在需要刷新的页面引入依赖:inject: ['reload'],

    在需要执行的地方直接调用方法即可:this.reload()。

    我的业务需求是在home里,页面右上角,在我的里面点击修改个人资料成功后,页面1就要刷新一下,如果是在app里面搭配provide、inject这样用的话,会出现一个问题,就是所有的弹窗以及menu部分就都不见了。还没有找到为什么,,

    后来发现,我的需求不通过刷新页面也可以解决,就是利用VUE组件通信,监听事件发生,然后重新调一下获取数据的接口就行。

    也就是说:

    1、给Vue的原型上添加一个bus属性

    main.js:Vue.prototype.$bus = new Vue()

    2、home页面进行修改个人资料操作时触发事件,

    home.vue: changeProfile () {this.$bus.$emit('change')}

    3、页面1里监听如果执行了操作,就调取页面1需要重新加载的数据接口。

    mounted () {
      this.$bus.$on('change', ()=> {
        this.doSomething()
      })
    },

    对于我的需求来说,页面刷新的第四种方法和利用组件通信都能解决我的问题,前者更简单后者更专业,也更强大。

    小伙伴们可以参考VUE官方文档:$dispatch 和 $broadcast 替换

    展开全文
  • 总结VUE几种页面刷新方法

    千次阅读 2019-06-11 19:49:28
  • vue.js 刷新页面

    2018-11-30 11:20:33
    做电商或其他项目的时候在操作数据之后需要更新一下页面 用户手动刷体验不好 整个页面刷新太突兀, 在app.vue 完成如下 &lt;router-view v-wechat-title="$route.meta.title" v-if="...

    做电商或其他项目的时候在操作数据之后需要更新一下页面 用户手动刷体验不好 整个页面刷新太突兀,
    在app.vue 完成如下

     <router-view  v-wechat-title="$route.meta.title" v-if="isRouterAlive"/>
    
    
    
    provide(){
          return{
            reload:this.reload
          }
        },
        data(){
          return{
            isRouterAlive:true,
          }
        },
        methods:{
          reload(){
            this.isRouterAlive = false;
            this.$nextTick(function () {
              this.isRouterAlive = true;
            })
          }
        }
    

    在需要使用的页面 注入依赖

    inject:["reload"],
    

    使用

     this.reload();
    

    完成

    展开全文
  • vue.js 刷新路由

    2018-06-01 16:01:52
    export default { beforeRouteEnter (to, from, next) { next(vm =&gt; { vm.$router.replace(from.path) }) } } 记录上一个地址跳转回去 引用方法 this.$router.replace('/refresh') ... ...
    export default {
      beforeRouteEnter (to, from, next) {
        next(vm => {
          vm.$router.replace(from.path)
        })
      }
    }

    记录上一个地址跳转回去

    引用方法

    this.$router.replace('/refresh')

     

    展开全文
  • vue.js 三种方式安装

    万次阅读 多人点赞 2017-12-18 20:17:18
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • Vue.js(一) Vue.js + element-ui 扫盲

    万次阅读 多人点赞 2018-12-09 20:32:59
    我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。 node.js是对Chrome ...
  • 整合springboot+vue.js--安装vue.js

    千次阅读 2019-04-29 20:52:32
    业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它 废话不多说,安排一个node.js,回归最老版的命令行编码! vue.js是什么?为什么要使用它? Vue.js...
  • Vue.js+Layer表格数据绑定与实现更新

    万次阅读 2017-06-14 17:23:29
     一:先使用Vue.js绑定好数据与更新事件    使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据     &lt;div id="content"&gt; &...
  • 策划列表相关的vue.js可畏的事 资源 官方资源外部资源工作门户社区会议播客官方的例子教程实例书 项目采用vue.js 开源商业产品应用/网站互动体验企业使用 组件&图书馆 用户界面组件 表通知...
  • vue.js 刷新后404问题

    千次阅读 2018-02-28 18:21:28
    问题说明:vue router mode 默认为hsas, 这样的url中带有#,让有强迫症的人很不爽,如果修改?const router = new Router({mode: 'history', routes, strict: process.env.NODE_ENV !== 'production',});爽了,但...
  • vue.js可视化开发工具Install on Chrome 在Chrome上安装 Install on Firefox 在Firefox上安装 Install the standalone app 安装独立应用 How to use the Developer Tools 如何使用开发人员工具 Filter components...
  • vue.js安装步骤教程

    万次阅读 多人点赞 2019-05-03 17:23:18
    取消
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • Vue.js及局部刷新

    2019-04-28 15:51:40
    http://how2j.cn/k/vuejs/vuejs-start/1744.html
  • Vue.js系列(一):Vue.js目录结构! 前言 今天博主将为大家分享Vue系列: Vue.js系列(一):Vue.js目录结构!不喜勿喷,如有异议欢迎讨论! 有一个强大的地基才能写出健壮的程序!请先阅读博主关于:Vue.js...
  • 以前写过一篇Vue.js单页应用实现前进刷新后退不刷新博客,但在实际的使用的中感觉配置很麻烦,因此查阅资料和阅读他人博客,总结出一套较为简洁的实现方案。 二、方案思路 1.后退不刷新肯定要使用keep-alive 2.前进...
  • 什么是vue.js?(概念很清楚)

    万次阅读 多人点赞 2017-06-01 15:35:30
    Vue.js新手入门指南最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己...
  • 小记:介绍vue.js

    千次阅读 2018-07-17 12:23:05
    vue.js是目前比较热门的前端框架之一。它具有易用,灵活,高效等特点。它也提供一种帮助我们快速构建饼开发前端项目的模式。本次分享主要就是介绍vuejs,了解vuejs的基本知识,以及开发流程,进一步了解如何通过...
  • Vue.js介绍以及优缺点

    万次阅读 多人点赞 2017-07-25 09:21:05
    一.MVX框架模式了解 MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。  View通过Controller来和Model联系,Controller是View和Model的协调...
  • 什么是vue.js?(概念很清楚)

    千次阅读 2018-11-28 10:42:33
    Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做...

空空如也

1 2 3 4 5 ... 20
收藏数 33,821
精华内容 13,528
关键字:

vue.js刷新

vue 订阅