vue 无痕刷新

AndroidTraveler 发布于2019-08-26 12:23 / 2114人阅读

摘要：最近遇到一个需求，需要刷新当前页面来更新数据，网上找了很多方法，在这里做个总结。这里主要记录三种方法，分别是强制刷新伪造刷新无痕刷新。

最近遇到一个需求，需要刷新当前页面来更新数据，网上找了很多方法，在这里做个总结。

这里主要记录三种方法，分别是：强制刷新、伪造刷新、无痕刷新。

强制刷新

window.location.reload()，原生 js 提供的方法；

this.$router.go(0)，vue 路由里面的一种方法；

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。

伪造刷新

通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来

// index.vue 首页
this.$router.replace("/empty")

// empty.vue 空白页
created() {
    this.$router.replace("/")
}

当点击刷新按钮时地址栏会有快速的地址切换过程

无痕刷新

先在全局组件注册一个方法，用该方法控制 router-view 的显示与否，然后在子组件调用；

用 v-if 控制的显示；

provide：全局注册方法；

inject：子组件引用 provide 注册的方法；

App.vue：

当前组件：

当点击按钮时所有页面重新渲染，体验最好

云服务器 GPU云服务器无痕 Vue_Vue Vue vue3 学习笔记 (五)——vue3

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

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

基于vue + nuxt 打造 o2o教育商城系统（触屏版）服务端渲染SSR

摘要：反向代理无痕埋点前言本项目纯属个人练习项目，数据并非真实，如有雷同，纯属巧合。 Node.js(v6.9.1) + express(4.X) + vue(2.0) + vuex + mysql(5.7.18) + （NUXT）SSR + nginx反向代理 + 无痕埋点前言 https://github.com/github1586...*本项目纯属个人练习项目，数据并非真实，如有雷...

Betta 2019-08-21 12:04 评论0 收藏0
基于vue + nuxt 打造 o2o教育商城系统（触屏版）服务端渲染SSR

摘要：反向代理无痕埋点前言本项目纯属个人练习项目，数据并非真实，如有雷同，纯属巧合。 Node.js(v6.9.1) + express(4.X) + vue(2.0) + vuex + mysql(5.7.18) + （NUXT）SSR + nginx反向代理 + 无痕埋点前言 https://github.com/github1586...*本项目纯属个人练习项目，数据并非真实，如有雷...

wangdai 2019-07-25 15:02 评论0 收藏0
无痕埋点之XPath

摘要：在这里我们是用来标识页面元素控件的唯一性至于什么是，可以自行。有它算出的功能打开一个网页，，在弹出的小窗口中选中一个标签，右键，看到了吧点下然后粘贴下就知道这元素的标签的多少了浏览器中通过获取和根据获取元素在这里我们是用XPath来标识页面元素、控件的唯一性 XPath 至于什么是XPath，可以自行google。chrome有它算出XPath的功能！打开一个网页，F12，在弹出的小...

mingzhong 2019-08-20 15:52 评论0 收藏0
JavaScript学习篇--本地存储

摘要：本地存储的方案传统把信息存储到客户端的浏览器中但是项目服务器端也是可以获取的把信息存储到服务器上的服务器存储永久存储在客服端的本地。在客户端运行的js是不能操作用户电脑磁盘中的文件的（这是为了保护客户端运行的安全）。 1、js中的本地存储：使用js向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息。...

hss01248 2019-08-22 10:54 评论0 收藏0