Vue 項目功能實現：刷新當前頁面

sorra 發布于2019-08-23 18:26 / 3684人閱讀

摘要：前言前些日子項目中突然接到了一個需求，要求點擊當前路由刷新頁面，進過實驗有如下幾種方案可實現需求，并簡述不同。此方式是利用了中前進和后退的功能，傳入刷新當前頁面。先把移除，移除后再重新添加，達到刷新當前頁面的功能。是目前最合適的實現方式。

前言

前些日子項目中突然接到了一個需求，要求點擊當前路由刷新頁面，進過實驗有如下幾種方案可實現需求，并簡述不同。

1. this.$router.go(0)

此方式是利用了 history 中前進和后退的功能，傳入 0 刷新當前頁面。
缺點：頁面整個刷新，會白屏。

2. location.reload()

直接使用刷新當前頁面的方法。
缺點：同 this.$router.go(0) 一樣，會白屏。

3. 給 router-view 標簽添加 v-if

通過 $nextTick()，協助實現。先把移除，移除后再重新添加，達到刷新當前頁面的功能。是目前最合適的實現方式。


頁面

GPU云服務器云服務器 ajax實現頁面刷新 js 實現頁面實時刷新數據關于頁面彈框功能實現刷新當前野蠻js

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

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