vue项目刷新当前页面的三种方法

 更新时间:2018年12月04日 11:26:35   作者:qq_16772725  
这篇文章主要介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

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

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

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

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

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

location. reload()
this.$router.go(0)

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

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

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

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

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

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

isRouterAlive //true or false 来控制

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

总结

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

相关文章

  • 详解vue移动端项目代码拆分记录

    详解vue移动端项目代码拆分记录

    这篇文章主要介绍了详解vue移动端项目代码拆分记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 让Vue响应Map或Set的变化操作

    让Vue响应Map或Set的变化操作

    这篇文章主要介绍了让Vue响应Map或Set的变化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 部署vue+Springboot前后端分离项目的步骤实现

    部署vue+Springboot前后端分离项目的步骤实现

    这篇文章主要介绍了部署vue+Springboot前后端分离项目的步骤实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 详解nginx配置vue h5 history去除#号

    详解nginx配置vue h5 history去除#号

    这篇文章主要介绍了详解nginx配置vue h5 history去除#号,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • VUE中v-on:click事件中获取当前dom元素的代码

    VUE中v-on:click事件中获取当前dom元素的代码

    这篇文章主要介绍了VUE中v-on:click事件中获取当前dom元素的代码,文中同时给大家提到了v-on:click获取当前事件对象元素的方法,需要的朋友可以参考下
    2018-08-08
  • vue实现单一筛选、删除筛选条件

    vue实现单一筛选、删除筛选条件

    这篇文章主要为大家详细介绍了vue实现单一筛选、删除筛选条件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 加载 vue 远程代码的组件实例详解

    加载 vue 远程代码的组件实例详解

    vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发
    2017-11-11
  • 用vue和node写的简易购物车实现

    用vue和node写的简易购物车实现

    这篇文章主要介绍了用vue和node写的简易购物车实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Sublime Text新建.vue模板并高亮(图文教程)

    Sublime Text新建.vue模板并高亮(图文教程)

    这篇文章主要介绍了Sublime Text新建.vue模板并高亮(图文教程),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Nuxt的路由配置和参数传递方式

    Nuxt的路由配置和参数传递方式

    这篇文章主要介绍了Nuxt的路由配置和参数传递方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论