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移动端的左右滑动事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue CLI2升级至Vue CLI3的方法步骤

    Vue CLI2升级至Vue CLI3的方法步骤

    这篇文章主要介绍了Vue CLI2升级至Vue CLI3的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue发布项目实例讲解

    Vue发布项目实例讲解

    在本篇文章里小编给各位分享的是关于Vue发布项目的实例内容以及知识点讲解,需要的朋友们参考下。
    2019-07-07
  • 详解vue-cli本地环境API代理设置和解决跨域

    详解vue-cli本地环境API代理设置和解决跨域

    这篇文章主要介绍了详解vue-cli本地环境API代理设置和解决跨域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 100行代码理解和分析vue2.0响应式架构

    100行代码理解和分析vue2.0响应式架构

    通过100行代码帮助大家理解和分析vue2.0响应式架构的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 详解Vue项目引入CreateJS的方法(亲测可用)

    详解Vue项目引入CreateJS的方法(亲测可用)

    CreateJS是基于HTML5开发的一套模块化的库和工具。这篇文章主要介绍了Vue项目引入CreateJS的方法(亲测),需要的朋友可以参考下
    2019-05-05
  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    这篇文章主要介绍了vue 数据双向绑定的实现方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 自定义Vue中的v-module双向绑定的实现

    自定义Vue中的v-module双向绑定的实现

    这篇文章主要介绍了自定义Vue中的v-module双向绑定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue mounted组件的使用

    vue mounted组件的使用

    这篇文章主要介绍了vue mounted组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue后台管理之动态加载路由的方法

    vue后台管理之动态加载路由的方法

    这篇文章主要介绍了vue后台管理之动态加载路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论