Vue項目保存代碼之后頁面自動更新問題
更新時間：2023年10月08日 16:47:50 作者：satuo@
這篇文章主要介紹了Vue項目保存代碼之后頁面自動更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue項目保存代碼之后頁面自動更新
想要在代碼中保存之后，頁面自動刷新。
命令行敲如下代碼
npm install webpack-dev-server
下載了這個東西就不用每次都手動刷新了，我也不知道這個是干嘛的，留在以后研究研究！
Vue項目刷新當(dāng)前頁面最優(yōu)解決
一般刷新頁面可以用location.reload(true)，history.go(0) 等方法，但是這對vue項目很不友好，會是頁面重新加載，出現(xiàn)暫時性的空白，而且耗費性能，所以vue項目最好不用這些方法.vue有this.$forceUpdate()可以強制更新，
下面介紹其他一種更好的方法。
通過v-if的功能觸發(fā)頁面刷新，結(jié)合provide和inject
<template>
<div id="app">
<router-view v-if="isShow"></router-view>
</div>
</template><script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isShow: true
}
},
methods: {
reload () {
this.isShow= false
this.$nextTick(function () {
this.isShow= true
})
}
}
}
</script>在要刷新的子路由頁面引入inject,然后執(zhí)行reload事件即可刷新頁面
export default {
name: "demo",
inject:['reload'],
data() {
return {
}
},
methods: {
reflesh(){
this.reload()
},
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對話框是一種常見的組件,用于在用戶與應(yīng)用程序進行交互時顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析(面向新手)
這篇文章主要介紹了vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue router重定向redirect如何傳值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹vscode中 vue項目es-lint的配置方法，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下吧2018-07-07
actions作為Vuex的五大核心之一，它的屬性是用來處理異步方法的，通過提交mutations實現(xiàn)。本文將具體介紹一下actions的使用教程，需要的可以參考一下2022-01-01
這篇文章主要介紹了iView-admin 動態(tài)路由問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
Vue?中的?deep、v-deep?和?>>>區(qū)別解析
文章主要介紹了在Vue中使用UI庫時,如何通過樣式穿透（style penetration）來修改子組件的樣式,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2026-02-02
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09