Vue路由切換頁面不更新問題解決方案
前言:vue-router的切換不同於傳統的頁面的切換。路由之間的切換,其實就是元件之間的切換,不是真正的頁面切換。這也會導致一個問題,就是引用相同元件的時候,會導致該元件無法更新,也就是我們口中的頁面無法更新的問題了。
一、問題呈現
在路由中進行切換結果
這時候會發現input標籤的value值並沒有隨著路由的改變而改變。並沒有更新
二、解決方案①
給<router-view :key="key"></router-view>增加一個不同:key值,這樣vue就會識別這是不同的<router-view>了。
在路由中進行切換結果
這時候路由就會更新了。不過這也就意味著需要把每個<router-view>都繫結一個key值。如果我從page1跳到page2不同元件的話,我其實是不用擔心元件更新問題的。
三、解決方案②
給<router-view v-if="routerAlive"></router-view>增加一個不同v-if值,來先摧毀<router-link>,然後再重新建立<router-link>起到重新整理頁面的效果。
①因為router-link元件有取消點選事件,這裡的.native就是為了觸發元件原生標籤中的事件。
②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 觸發後再執行 this.routerAlive = true; 從而起到摧毀再建立的效果。
四、解決方案②的延伸,在路由內部觸發路由的重新整理。
方案①,方案②都是通過路由的外部來更新路由的,那如果想從路由內部來更新路由呢?
<!-- 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(){ //在父元件中建立屬性 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">跳轉到nick,不重新整理路由</button> <button @click="linkToNick2">跳轉到nick,並重新整理路由</button> <br/> <button @click="linkToSelf1">跳轉到本身,不重新整理路由</button> <button @click="linkToSelf2">重新整理本身</button> </div> </template> <script type="text/javascript"> export default { name:'page1',inject:['routerRefresh'],//在子元件中注入在父元件中出建立的屬性 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>
①、當我們點選"跳轉到nick,不重新整理路由" 時,會發現input的value值並沒有改變。
②、當我們點選"跳轉到nick,並重新整理路由" 時,這時候input的value值就已經改變了。
③、當我們在input中輸入隨便輸入些數值,然後點選"跳轉到本身,不重新整理路由",會發現input裡面的內容沒有重新整理。
④、點選重新整理本身就能觸發重新整理路由了,是不是很實用。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。