Vue使用三種方法刷新頁面
更新時間：2021年06月24日 17:29:36 作者：壞小哥
這篇文章說明了如何使用Vue去刷新當前頁面的多種方法實例,有完成的代碼提供參考,希望對你有所幫助
我們在寫項目的時候，經(jīng)常會遇到，用戶執(zhí)行完某個動作，改變了某些狀態(tài)，需要重新刷新頁面，以此來重新渲染頁面。如：用戶登錄成功、增加、刪除、更新等。
- 原始方法：
location.reload();
- vue自帶的路由跳轉(zhuǎn)：
this.$router.go(0);
用過的人都知道，前兩者都是強制刷新頁面，會出現(xià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使用三種方法刷新頁面的文章就介紹到這了,更多相關(guān)Vue刷新頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
解決ant Design Search無法輸入內(nèi)容的問題
這篇文章主要介紹了解決ant Design Search無法輸入內(nèi)容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue頁面更新patch的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了vue項目內(nèi)存溢出問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue是一套構(gòu)建用戶界面的框架， 開發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。這篇文章主要介紹了vue中使用elementUI組件手動上傳圖片,需要的朋友可以參考下2019-12-12
使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（一）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（一）的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了如何用electron把vue項目打包為桌面應用exe文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05