Vueルートの切り替えページは問題解決策を更新しません。

5058 ワード

Vue ルート切り替えページ更新

前書き：vue-routerの切り替えは伝統的なページとは違っています。ルート間の切り替えは、実はコンポーネント間の切り替えで、本当のページ切り替えではありません。これは同じコンポーネントを引用すると、コンポーネントが更新できなくなります。つまり、私たちの口の中のページが更新できなくなります。
一、問題が現れる

経路の切り替え結果

このときinputタグのvalue値はルートの変化によって変化していないことが分かります。更新されていません
二、解決策①
'router-view:key="key"に違いを追加します。これでvueはこれが違っていると認識します。

経路の切り替え結果

この時にルートが更新されます。でも、これはつまり、各〈router-view〉を一つのkey値に結びつける必要があるということです。もし私がPage 1からPage 2の異なるコンポーネントにジャンプしたら、コンポーネント更新の心配はありません。
三、解決策②
"router-view v-inf="routerAlive"に異なるv-if値を追加して、先にを破壊して、再度を作成して、ページを更新する効果があります。

①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>

①、「ニコニコにジャンプしてルートを更新しない」をクリックすると、inputのvalue値は変わりません。

②、「ニコニコにジャンプして、ルートを更新する」をクリックすると、inputのvalue値が変わります。

③私たちはinputに勝手に数値を入力し、「自分にジャンプしてルートを更新しない」をクリックすると、inputの内容が更新されていないことが分かります。

④、更新自体をクリックすると、ルーティングの更新がトリガされます。実用的ではありませんか？

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

FPOを使ってフォルダ名を変更し、ファイル転送盗難防止チェーンを実現します。

aspウォーターマークコンポーネントのAspJpegの結合コードの例