您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue如何刷新頁面”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“Vue如何刷新頁面”文章能幫助大家解決問題。
我們在寫項(xiàng)目的時(shí)候,經(jīng)常會(huì)遇到,用戶執(zhí)行完某個(gè)動(dòng)作,改變了某些狀態(tài),需要重新刷新頁面,以此來重新渲染頁面。如:用戶登錄成功、增加、刪除、更新等。
原始方法:
location.reload();
vue自帶的路由跳轉(zhuǎn):
this.$router.go(0);
用過的人都知道,前兩者都是強(qiáng)制刷新頁面,會(huì)出現(xiàn)短暫的閃爍,用戶體驗(yàn)效果不好。
所以,我們選擇第三種方式:
首先在App里面寫下如下代碼:
<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide () { //父組件中通過provide來提供變量,在子組件中通過inject來注入變量。 return { reload: this.reload } }, data() { return{ isRouterAlive: true //控制視圖是否顯示的變量 } }, methods: { reload () { this.isRouterAlive = false; //先關(guān)閉, this.$nextTick(function () { this.isRouterAlive = true; //再打開 }) } }, } </script>
接下來,我們就可以在需要刷新頁面的組件里這樣寫:
export default { inject:['reload'], //注入App里的reload方法 data () { return { ....... } },
關(guān)于“Vue如何刷新頁面”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。