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