前言

成都創新互聯公司是專業的南芬網站建設公司，南芬接單;提供網站設計制作、成都做網站,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行南芬網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

Vue.js（是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，是一種數據驅動的前端框架

我們在開發vue的頁面的時候，有時候會遇到需要刷新當前頁面功能，但是vue框架自帶的router是不支持刷新當前頁面功能的，它只支持在路由路徑變化時刷新頁面?；谶@個原理，為了實現刷新頁面，可以先跳轉到一個空頁面，然后馬上跳回來，從而實現這個功能。

開發工具環境

• vue.js
• webstorm

方法如下

一、原理

如上圖所示，我們需要為要刷新的頁面A編寫一個自動跳回的空頁面，當用戶操作了A頁面后，A頁面先跳轉到空頁面，然后空頁面馬上跳回A頁面，這時候vue會去重新加載A頁面。這種方法可以變相實現自我刷新，缺點是當需要刷新的頁面較多時，空頁面也會隨之變多。

二、當前頁面事件監聽

如上圖所示，我們定義了refreshPage方法，這個方法是對特定事件的回調，在這個方法會處理業務邏輯，然后在最后使用vue的router跳轉到一個空頁面，這個空頁面路由路徑是/user/back，這個路徑是隨便取的，大家可以選擇自己的路徑

三、空頁面的編寫

如上圖所示，在空頁面中立即執行路由，跳回原來的頁面，這時候原來的頁面會進行重新加載，從而實現了刷新。這里的/user/index就是跳回原來頁面的路由路徑，大家需要根據自己的項目情況寫。

四、注意事項

本文所使用的方法，其實是一種hack方法，在極端情況下，比如網絡極端惡劣，那么可能出現跳到空頁面后跳不會來，或者干脆跳不到空頁面的情況，大家需要根據自己的項目情況酌情選擇。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創新互聯的支持。

分享標題：vue.js實現刷新當前頁面的方法教程
本文網址：http://m.newbst.com/article46/gpiheg.html

成都網站建設公司_創新互聯，為您提供App開發、虛擬主機、營銷型網站建設、企業網站制作、網站設計公司、網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯