Vue項(xiàng)目保存代碼之后頁(yè)面自動(dòng)更新問(wèn)題
Vue項(xiàng)目保存代碼之后頁(yè)面自動(dòng)更新
想要在代碼中保存之后，頁(yè)面自動(dòng)刷新。
命令行敲如下代碼
npm install webpack-dev-server
下載了這個(gè)東西就不用每次都手動(dòng)刷新了，我也不知道這個(gè)是干嘛的，留在以后研究研究！
Vue項(xiàng)目刷新當(dāng)前頁(yè)面最優(yōu)解決
一般刷新頁(yè)面可以用location.reload(true)，history.go(0) 等方法，但是這對(duì)vue項(xiàng)目很不友好，會(huì)是頁(yè)面重新加載，出現(xiàn)暫時(shí)性的空白，而且耗費(fèi)性能，所以vue項(xiàng)目最好不用這些方法.vue有this.$forceUpdate()可以強(qiáng)制更新，
下面介紹其他一種更好的方法。
通過(guò)v-if的功能觸發(fā)頁(yè)面刷新，結(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>在要刷新的子路由頁(yè)面引入inject,然后執(zhí)行reload事件即可刷新頁(yè)面
export default {
name: "demo",
inject:['reload'],
data() {
return {
}
},
methods: {
reflesh(){
this.reload()
},
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡(jiǎn)單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個(gè)可以助你提高效率的Vue指令,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query
這篇文章主要介紹了Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能
對(duì)于vue下的雙向綁定功能，個(gè)人理解為在處理邏輯的過(guò)程中緩存了大量的node對(duì)象，node對(duì)象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對(duì)象，那么在用的過(guò)程中哪里需要改變就把node拿出來(lái)，進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定2021-06-06
在vue中實(shí)現(xiàn)antd的動(dòng)態(tài)主題的代碼示例
在需求開(kāi)發(fā)階段,鑒于項(xiàng)目采用了antd作為基礎(chǔ)組件庫(kù),確保組件外觀與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當(dāng)前antd-vue尚未實(shí)現(xiàn)這一便捷的CSS變量特性,但理解其背后的實(shí)現(xiàn)機(jī)制后,我們可以自行構(gòu)建這一功能,需要的朋友可以參考下2024-07-07
vuejs如何清空表單數(shù)據(jù)、刪除對(duì)象中的空屬性公共方法
這篇文章主要介紹了vuejs如何清空表單數(shù)據(jù)、刪除對(duì)象中的空屬性公共方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
vue項(xiàng)目啟動(dòng)后沒(méi)有局域網(wǎng)地址問(wèn)題
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后沒(méi)有局域網(wǎng)地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue+Element實(shí)現(xiàn)表格單元格編輯
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vscode中vue-cli項(xiàng)目es-lint的配置方法
本文主要介紹vscode中 vue項(xiàng)目es-lint的配置方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的的朋友參考下吧2018-07-07
vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12