Vue路由切換頁(yè)面不更新問題解決方案
前言:vue-router的切換不同于傳統(tǒng)的頁(yè)面的切換。路由之間的切換,其實(shí)就是組件之間的切換,不是真正的頁(yè)面切換。這也會(huì)導(dǎo)致一個(gè)問題,就是引用相同組件的時(shí)候,會(huì)導(dǎo)致該組件無(wú)法更新,也就是我們口中的頁(yè)面無(wú)法更新的問題了。
一、問題呈現(xiàn)
在路由中進(jìn)行切換結(jié)果
這時(shí)候會(huì)發(fā)現(xiàn)input標(biāo)簽的value值并沒有隨著路由的改變而改變。并沒有更新
二、解決方案①
給<router-view :key="key"></router-view>增加一個(gè)不同:key值,這樣vue就會(huì)識(shí)別這是不同的<router-view>了。
在路由中進(jìn)行切換結(jié)果
這時(shí)候路由就會(huì)更新了。不過這也就意味著需要把每個(gè)<router-view>都綁定一個(gè)key值。如果我從page1跳到page2不同組件的話,我其實(shí)是不用擔(dān)心組件更新問題的。
三、解決方案②
給<router-view v-if="routerAlive"></router-view>增加一個(gè)不同v-if值,來(lái)先摧毀<router-link>,然后再重新創(chuàng)建<router-link>起到刷新頁(yè)面的效果。
①因?yàn)閞outer-link組件有取消點(diǎn)擊事件,這里的.native就是為了觸發(fā)組件原生標(biāo)簽中的事件。
②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 觸發(fā)后再執(zhí)行 this.routerAlive = true; 從而起到摧毀再創(chuàng)建的效果。
四、解決方案②的延伸,在路由內(nèi)部觸發(fā)路由的刷新。
方案①,方案②都是通過路由的外部來(lái)更新路由的,那如果想從路由內(nèi)部來(lái)更新路由呢?
<!-- App.vue根組件代碼 --> <template> <div class="app"> <div class="slide"> <ul> <li><router-link to="/page1/freddy" >freddy</router-link></li> <li><router-link to="/page1/nick" >nick</router-link></li> <li><router-link to="/page1/mike" >mike</router-link></li> </ul> </div> <div class="content"> <router-view v-if="routerAlive"></router-view> </div> </div> </template> <script> export default{ data(){ return { routerAlive:true } }, provide(){ //在父組件中創(chuàng)建屬性 return { routerRefresh: this.routerRefresh } }, methods:{ routerRefresh(){ this.routerAlive = false; this.$nextTick(()=>{ this.routerAlive = true; }); } } } </script>
<!-- 組件Page1代碼 --> <template> <div class="page-1"> 名字:<input type="text" v-model="value"><br/> <button @click="linkToNick1">跳轉(zhuǎn)到nick,不刷新路由</button> <button @click="linkToNick2">跳轉(zhuǎn)到nick,并刷新路由</button> <br/> <button @click="linkToSelf1">跳轉(zhuǎn)到本身,不刷新路由</button> <button @click="linkToSelf2">刷新本身</button> </div> </template> <script type="text/javascript"> export default { name:'page1', inject:['routerRefresh'], //在子組件中注入在父組件中出創(chuàng)建的屬性 mounted(){ this.value = this.$route.params.name; }, data(){ return { value:'' } }, methods:{ linkToNick1(){ this.$router.push('/page1/nick'); }, linkToSelf1(){ this.$router.push('/page1/freddy'); }, linkToNick2(){ this.$router.push('/page1/nick'); this.routerRefresh(); }, linkToSelf2(){ this.routerRefresh(); } } } </script> <style type="text/css"> button { margin-top:10px;} button:hover { background:#ff9500; } </style>
①、當(dāng)我們點(diǎn)擊"跳轉(zhuǎn)到nick,不刷新路由" 時(shí),會(huì)發(fā)現(xiàn)input的value值并沒有改變。
②、當(dāng)我們點(diǎn)擊"跳轉(zhuǎn)到nick,并刷新路由" 時(shí),這時(shí)候input的value值就已經(jīng)改變了。
③、當(dāng)我們?cè)趇nput中輸入隨便輸入些數(shù)值,然后點(diǎn)擊"跳轉(zhuǎn)到本身,不刷新路由",會(huì)發(fā)現(xiàn)input里面的內(nèi)容沒有刷新。
④、點(diǎn)擊刷新本身就能觸發(fā)刷新路由了,是不是很實(shí)用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總,需要的朋友可以參考下2023-03-03vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由(適合初學(xué))
這篇文章主要介紹了vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由,通過本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系,本版本非常簡(jiǎn)單,適合初學(xué)者,需要的朋友可以參考下2017-12-12關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽bug,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼
本文主要介紹了el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08