vue 無痕刷新

AndroidTraveler 發布于2019-08-26 12:23 / 2152人閱讀

摘要：最近遇到一個需求，需要刷新當前頁面來更新數據，網上找了很多方法，在這里做個總結。這里主要記錄三種方法，分別是強制刷新偽造刷新無痕刷新。

最近遇到一個需求，需要刷新當前頁面來更新數據，網上找了很多方法，在這里做個總結。

這里主要記錄三種方法，分別是：強制刷新、偽造刷新、無痕刷新。

強制刷新

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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