vueではルーティングパラメータの変化を傍受し,パラメータの変化に応答する(動的ルーティングでのパラメータの変化)

902 ワード

パラメータまたはクエリーの変更は、ナビゲーション・ガードの開始/終了をトリガーしないことを覚えておいてください.これらの変化に対処するには、$routeオブジェクトを観察するか、beforeRouteUpdateのコンポーネント内ガードを使用します.
ルーティングが変化するが、コンポーネントが多重化される場合、すなわち、
複数のルーティングが1つの動的ルーティングに一致する場合、例えば「/user/123」、「/user/456」は、次のルーティングに一致する
{
    name:'dancanshu',
    path: '/user/:id',//       
    component: () => import('../views/more.vue')
  },

ルーティングの変化をどのように監視しますか?次の2つの方法があります.
方法1:$routeを傍受する
  watch:{
       '$route' (to, from) {
      //                ,       watch (    ) $route   
      console.log(to, from)
    }
  },

方式2:コンポーネント内のナビゲーションガード、beforeRouteUpdate、(created(){}ライフサイクル関数と同レベル);
  beforeRouteUpdate (to, from, next) {
     console.log('to:',to)
     console.log('from:', from)
     next();//   next()
  },