vue がルーティングの変更を監視する方法

ルート変更を監視するいくつかの方法のまとめ

---

1. 監視ルートはどこから来たのか?

watch:{
    
    
    $route(to,from){
    
    
      console.log(from.path);//从哪来
      console.log(to.path);//到哪去
    }
}

2. ルーティングの変更を監視して、新旧のルーティング情報を取得します。

watch:{
    
    
    $route:{
    
    
      handler(val,oldval){
    
    
        console.log(val);//新路由信息
        console.log(oldval);//老路由信息
      },
      // 深度观察监听
      deep: true
    }
  }

3. 監視経路変更トリガー方法

methods:{
    
    
  getPath(){
    
    
    console.log(1111)
  }
},
watch:{
    
    
  '$route':'getPath'
}

4. グローバル監視ルート

app.vueのcreateに以下のコードを追加して判定

this.$router.beforeEach((to, from, next) => {
    
    
    console.log(to);
    next();
});

コンポーネントのルーティングパラメータの変更をリッスンするにはどうすればよいですか?

/user/foo から /user/bar に移動するなど、ルート パラメーターを使用する場合、元のコンポーネント インスタンスが再利用されます。

どちらのルートも同じコンポーネントをレンダリングするため、破棄して再作成するよりも再利用の方が効率的です。ただし、これはコンポーネントのライフサイクル フックが呼び出されなくなることも意味します。

次に、コンポーネント内のルーティング パラメーターの変更を監視したい場合は、watch (変更を監視) $route オブジェクトを使用するか、beforeRouteUpdate のコンポーネントでガードを使用するだけです。

1.$routeを監視する

const User = {
    
    
  template: '...',
  watch: {
    
    
    $route(to, from) {
    
    
      // 对路由变化作出响应...
    }
  }
}

2. コンポーネントのナビゲーション ガードを介して

beforeRouteUpdate 、(created(){} ライフサイクル関数と同じレベル)

const User = {
    
    
  template: '...',
  beforeRouteUpdate(to, from, next) {
    
    
    // react to route changes...
    // don't forget to call next()
  }
}