快捷導(dǎo)航

Vue路由切換頁(yè)面不更新問(wèn)題解決方案

更新時(shí)間：2020年07月10日 10:08:53 作者：yuwenjing

這篇文章主要介紹了Vue路由切換頁(yè)面不更新問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言：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>