当前位置:主页 > vue.js教程 > vue项目刷新当前页面的三种方法

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

发布:2019-10-01 21:24:09 87


给网友朋友们带来一篇相关的编程文章,网友隆安阳根据主题投稿了本篇教程内容,涉及到vue刷新当前页面、vue、刷新页面、vue项目刷新当前页面的三种方法相关内容,已被557网友关注,内容中涉及的知识点可以在下方直接下载获取。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

isRouterAlive //true or false 来控制

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

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

总结

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


参考资料

相关文章

  • vue+vue-router转场动画效果的代码实例

    发布:2020-02-16

    今天小编就为大家分享一篇vue+vue-router转场动画的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • webpack+vue.js入门教学

    发布:2020-07-21

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程


  • vue-cli3快速发布一个fullpage组件详解

    发布:2020-03-24

    这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解Vue路由History mode模式中页面无法渲染的原因及解决

    详解Vue路由History mode模式中页面无法渲染的原因及解决

    发布:2022-06-22

    给大家整理了关于Vue的教程,这篇文章主要介绍了详解Vue路由History mode模式中页面无法渲染的原因及解决,非常具有实用价值,需要的朋友可以参考下


  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    发布:2023-01-09

    给大家整理了关于vue的教程,本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • vue列表交错过渡实现实例

    发布:2020-04-13

    这篇文章主要介绍了vue的列表交错过渡实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • vue-validator(vue验证器)实例用法

    发布:2020-05-25

    本篇文章主要介绍了vue-validator(vue验证器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解Vue调用手机相机和相册以及上传

    发布:2022-06-18

    给大家整理了关于Vue的教程,这篇文章主要介绍了Vue调用手机相机及上传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


网友讨论