VUEは、現在のルーティングリスナーの腕時計を監視します

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/qq_35713752/article/details/102686924

リスナー：

彼らは、処理ロジックリスナーの対応する変化に書き込むことができるようなルーティングなどのデータの変更、およびデータ・ページの値に応答して、リスナーを使用することができます。

リスナーを使用して簡単です：時計のオブジェクトは、リスナーの値は、それが実行された変更された場合にのみ、リスナーです。

data() {
  return {
    msg: ''
  }
},
watch:{
  msg:function(){
    this.msg = '我改变了，新的msg为：'+msg;
  }
}

コード分​​析：データ変数に断言MSGは、MSGの値は、MSGリスニング機能が実行される内部MSGリスナーオブジェクト、上のリスニング時計を作成し、空の文字列です。

 

のは、完全なコードのデモルート変更をリッスンしてみましょう： 

要件：
ホーム・ページに加えて、ナビゲーションバーは、各ページの[A]のリターンを表示する必要があります。

ソリューション：
ナビゲーションバーで内部の[戻る]コンポーネントは、ホームページの現在のルートかどうかを聞くことによって対象物を見て、その後、ステータス表示を決定

コード：

<template>
  <div id="back" v-if="isShowBack">
    <div class="back_box" @click="toBack()">
      <span class="left_arrow">
        <img src="../../../static/images/icon_arrow_bottom_left.png" />
      </span>
    </div>
  </div>
</template>
 
<script>
  var that;
  export default {
    data() {
      return {
        msg: '',
        isShowBack:false
      }
    },
    methods: {
      toBack() {
        console.log('点击了返回')
        this.$router.go(-1);
      }
    },
    watch:{
      '$route':function(){
        that = this;
        console.log('watch里面',that.$route.name);
        if(that.$route.name == 'HomeNew'){
          that.isShowBack = false;
        }else{
          that.isShowBack = true;
        }
      }
    }
  }
</script>
 
<style scoped="scoped">
  .back_box {
    width: 100%;
    height: 30px;
    background: #f1f1f1;
  }
 
  .left_arrow {
    width: 22px;
    display: inline-block;
    transform: rotate(90deg);
    margin-top: 4px;
    margin-left: 4px;
  }
 
  .left_arrow img {
    width: 100%;
  }
</style>