From f918955c6f216e8a5b7d920401f7396ee45e4691 Mon Sep 17 00:00:00 2001 From: galvan Date: Tue, 15 Aug 2017 16:20:02 -0700 Subject: [PATCH 1/2] add beforeRouteUpdate use case to navigation doc --- docs/en/essentials/navigation.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/en/essentials/navigation.md b/docs/en/essentials/navigation.md index af6dc4f94..fb56ed3de 100644 --- a/docs/en/essentials/navigation.md +++ b/docs/en/essentials/navigation.md @@ -45,6 +45,22 @@ The same rules apply for the `to` property of the `router-link` component. In 2.2.0+, optionally provide `onComplete` and `onAbort` callbacks to `router.push` or `router.replace` as the 2nd and 3rd arguments. These callbacks will be called when the navigation either successfully completed (after all async hooks are resolved), or aborted (navigated to the same route, or to a different route before current navigation has finished), respectively. +**Note:** If the destination path reuses component, `beforeRouteUpdate` can be used to re-initialize data. + +```js +const Foo = { + template: '...', + data () { + return { + name: this.$route.params.name + } + }, + beforeRouteUpdate (to, from, next) { + this.name = to.params.name + } +} +``` + #### `router.replace(location, onComplete?, onAbort?)` It acts like `router.push`, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry. From dc8908b4e20eb65dc752f39b52e276dc3a3ee86e Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 16 Aug 2017 09:32:35 +0200 Subject: [PATCH 2/2] Update navigation.md --- docs/en/essentials/navigation.md | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/docs/en/essentials/navigation.md b/docs/en/essentials/navigation.md index fb56ed3de..7c421e938 100644 --- a/docs/en/essentials/navigation.md +++ b/docs/en/essentials/navigation.md @@ -45,21 +45,7 @@ The same rules apply for the `to` property of the `router-link` component. In 2.2.0+, optionally provide `onComplete` and `onAbort` callbacks to `router.push` or `router.replace` as the 2nd and 3rd arguments. These callbacks will be called when the navigation either successfully completed (after all async hooks are resolved), or aborted (navigated to the same route, or to a different route before current navigation has finished), respectively. -**Note:** If the destination path reuses component, `beforeRouteUpdate` can be used to re-initialize data. - -```js -const Foo = { - template: '...', - data () { - return { - name: this.$route.params.name - } - }, - beforeRouteUpdate (to, from, next) { - this.name = to.params.name - } -} -``` +**Note:** If the destination is the same as the current route and only params are changing (eg: going from one profile to another `/users/1` -> `/users/2`), you will have to use [beforeRouteUpdate](./dynamic-matching.html#reacting-to-params-changes) to react to changes (eg: fetching the user information). #### `router.replace(location, onComplete?, onAbort?)`