Vue 项目功能实现：刷新当前页面

sorra 发布于2019-08-23 18:26 / 3463人阅读

摘要：前言前些日子项目中突然接到了一个需求，要求点击当前路由刷新页面，进过实验有如下几种方案可实现需求，并简述不同。此方式是利用了中前进和后退的功能，传入刷新当前页面。先把移除，移除后再重新添加，达到刷新当前页面的功能。是目前最合适的实现方式。

前言

前些日子项目中突然接到了一个需求，要求点击当前路由刷新页面，进过实验有如下几种方案可实现需求，并简述不同。

1. this.$router.go(0)

此方式是利用了 history 中前进和后退的功能，传入 0 刷新当前页面。
缺点：页面整个刷新，会白屏。

2. location.reload()

直接使用刷新当前页面的方法。
缺点：同 this.$router.go(0) 一样，会白屏。

3. 给 router-view 标签添加 v-if

通过 $nextTick()，协助实现。先把移除，移除后再重新添加，达到刷新当前页面的功能。是目前最合适的实现方式。


页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105232.html

Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

摘要：免费升级到升级到后，服务器可以开启版本，对比性能和缓存各方面要更好，还有其他新特性，可以启动功能，更好的进行离线缓存，更好的离线体验。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在线地址:https://fancy.czero.cn 手机扫描二维码查看: showImg(http...

zengdongbao 2019-08-23 10:22 评论0 收藏0
Webpack 热更新机制

摘要：联想到我在微信小程序上的开发体验，真心觉得如果有热更新机制的话，开发效率要高很多。热更新示例下面通过例子来进一步解释热更新机制。想必作为前端大佬的你，工作中应该用过 webpack，并且对热更新的特性也有了解。如果没有，当然也没关系。下面我要讲的，是我对 Webpack 热更新机制的一些认识和理解，不足之处，欢迎指正。首先：热更新是啥？热更新，是指 Hot Module Re...

mikasa 2019-08-23 14:05 评论0 收藏0
Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Karuru 2019-08-22 17:16 评论0 收藏0
原生 js 实现一个前端路由 router

摘要：实现原理现在前端的路由实现一般有两种，一种是路由，另外一种是路由。现在的前端主流框架的路由实现方式都会采用路由，本项目采用的也是。当值发生改变的时候，我们可以通过事件监听到，从而在回调函数里面触发某些方法。效果图： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 项目地址：https...

gggggggbong 2019-08-26 13:30 评论0 收藏0