前言：vue-router的切換不同于傳統(tǒng)的頁(yè)面的切換。路由之間的切換，其實(shí)就是組件之間的切換，不是真正的頁(yè)面切換。這也會(huì)導(dǎo)致一個(gè)問(wèn)題，就是引用相同組件的時(shí)候，會(huì)導(dǎo)致該組件無(wú)法更新，也就是我們口中的頁(yè)面無(wú)法更新的問(wèn)題了。

一、問(wèn)題呈現(xiàn)

在路由中進(jìn)行切換結(jié)果

這時(shí)候會(huì)發(fā)現(xiàn)input標(biāo)簽的value值并沒(méi)有隨著路由的改變而改變。并沒(méi)有更新

二、解決方案①

給<router-view :key='key'></router-view>增加一個(gè)不同:key值，這樣vue就會(huì)識(shí)別這是不同的<router-view>了。

在路由中進(jìn)行切換結(jié)果

這時(shí)候路由就會(huì)更新了。不過(guò)這也就意味著需要把每個(gè)<router-view>都綁定一個(gè)key值。如果我從page1跳到page2不同組件的話，我其實(shí)是不用擔(dān)心組件更新問(wè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ā)路由的刷新。

方案①，方案②都是通過(guò)路由的外部來(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值并沒(méi)有改變。

②、當(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)容沒(méi)有刷新。

④、點(diǎn)擊刷新本身就能觸發(fā)刷新路由了，是不是很實(shí)用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。