vueではルーティングパラメータの変化を傍受し,パラメータの変化に応答する(動的ルーティングでのパラメータの変化)
902 ワード
パラメータまたはクエリーの変更は、ナビゲーション・ガードの開始/終了をトリガーしないことを覚えておいてください.これらの変化に対処するには、
ルーティングが変化するが、コンポーネントが多重化される場合、すなわち、
複数のルーティングが1つの動的ルーティングに一致する場合、例えば「/user/123」、「/user/456」は、次のルーティングに一致する
ルーティングの変化をどのように監視しますか?次の2つの方法があります.
方法1:$routeを傍受する
方式2:コンポーネント内のナビゲーションガード、beforeRouteUpdate、(created(){}ライフサイクル関数と同レベル);
$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()
},