From e8d3b192000f053d648dd34d3cd7fb03058687f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Fri, 25 Aug 2017 21:23:43 +0200 Subject: [PATCH 1/2] Improve in-component guard examples --- docs/en/advanced/navigation-guards.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/en/advanced/navigation-guards.md b/docs/en/advanced/navigation-guards.md index a9efe15a2..518799137 100644 --- a/docs/en/advanced/navigation-guards.md +++ b/docs/en/advanced/navigation-guards.md @@ -116,7 +116,27 @@ beforeRouteEnter (to, from, next) { } ``` -You can directly access `this` inside `beforeRouteLeave`. The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling `next(false)`. +You can directly access `this` inside `beforeRouteEnter` and `beforeRouteLeave`, so using this callback is not necessary and therefore *not supported*: + +```js +beforeRouteUpdate (to, from, next) { + this.name = to.params.name + next() +} +``` + +The **leave guard** is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling `next(false)`. + +```js +beforeRouteLeave (to, from , next) { + const answer = window.confirm('Do you really want to leave? you have unsaved changes!') + if (answer) { + next() + } else { + next(false) + } +} +``` ### The Full Navigation Resolution Flow From d18206d3687652cc24c266b192a51147cc1b7dd1 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 11 Oct 2017 15:34:19 -0400 Subject: [PATCH 2/2] Update navigation-guards.md --- docs/en/advanced/navigation-guards.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/en/advanced/navigation-guards.md b/docs/en/advanced/navigation-guards.md index 518799137..458d71429 100644 --- a/docs/en/advanced/navigation-guards.md +++ b/docs/en/advanced/navigation-guards.md @@ -116,10 +116,11 @@ beforeRouteEnter (to, from, next) { } ``` -You can directly access `this` inside `beforeRouteEnter` and `beforeRouteLeave`, so using this callback is not necessary and therefore *not supported*: +Note that `beforeRouteEnter` is the only hook that supports passing a callback to `next`. For `beforeRouteUpdate` and `beforeRouteLeave`, `this` is already available, so passing a callback is unnecessary and therefore *not supported*: ```js beforeRouteUpdate (to, from, next) { + // just use `this` this.name = to.params.name next() }