beforeRouteUpdateと '$ route'の視聴の違い - Vue.js？

Question

われわれが知っているように、同じコンポーネントのparams変更に反応するには、beforeRouteUpdateフックまたは$routeを使用します。 $ルートを見て

：

const User = { 
    template: '...', 
    watch: { 
    '$route' (to, from) { 
     // react to route changes... 
    } 
    } 
} 

beforeRouteUpdate方法：

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

これら2つの違いは何ですか？両方が同じ場合、なぜvue routerがbeforeRouteUpdateを導入したのですか？ beforeRouteUpdate上documentationから

Answer 1

：このコンポーネントを描画するルートが変更されていますが、このコンポーネントは、新しいルートで再利用されたときに呼び出さ

。たとえば、動的パラメータが/foo/:idのルートの場合、/foo/1と/foo/2の間を移動すると、同じFooコンポーネントインスタンスが再利用され、そのときにこのフックが呼び出されます。

ドキュメントは$routeオブジェクトの値が実際に変化前にフックが呼び出されることを明らかに不明です。これは、このナビゲーションフックとウォッチャーを$routeに設定することの違いです。と呼ばれ、の値が$routeの後に変更されました。

、あなたは（next()を呼び出していないことで）変化するからルートを禁止するかどうかを決定することができたりnext('/foo')、next({ name: 'foo' })、などのような別のルート値を渡すことで（全く別のルートに行くbeforeRouteUpdateナビゲーションガードを使用して）。

fiddleには、これらの関数が呼び出されるタイミングが示されています。

Answer 2

@thanksdと同じようにbeforeRouteUpdateはガードに似ています。あなたが行動を取るから経路を防ぐことはできませんが、beforeRouteUpdateとあなたが見ると、next機能で行うことができます。たとえば、データが取得されてからコンポーネントに進むまで待つことができます。

詳細については、vue-routerのマニュアルData Fetchingを参照してください。