update docs for new guard signature

Author: yyx990803

docs/en/advanced/data-fetching.md

@@ -82,10 +82,11 @@ export default {
       error: null
     }
   },
-  beforeRouteEnter (route, redirect, next) {
-    getPost(route.params.id, (err, post) => {
+  beforeRouteEnter (to, from, next) {
+    getPost(to.params.id, (err, post) => {
       if (err) {
         // display some global error message
+        next(false)
       } else {
         next(vm => {
           vm.post = post

docs/en/advanced/meta.md

@@ -32,20 +32,20 @@ All route records matched by a route are exposed on the `$route` object (and als
 An example use case is checking for a meta field in the global navigation guard:
 
 ``` js
-router.beforeEach((route, redirect, next) => {
-  if (route.matched.some(record => record.meta.requiresAuth)) {
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
     // this route requires auth, check if logged in
     // if not, redirect to login page.
     if (!auth.loggedIn()) {
-      redirect({
+      next({
         path: '/login',
-        query: { redirect: route.fullPath }
+        query: { redirect: to.fullPath }
       })
     } else {
       next()
     }
   } else {
-    next()
+    next() // make sure to always call next()!
   }
 })
 ```

docs/en/advanced/navigation-guards.md

@@ -9,7 +9,7 @@ You can register global before guards using `router.beforeEach`:
 ``` js
 const router = new VueRouter({ ... })
 
-router.beforeEach((route, redirect, next) => {
+router.beforeEach((to, from, next) => {
   // ...
 })
 ```
@@ -18,18 +18,24 @@ Global before guards are called in creation order, whenever a navigation is trig
 
 Every guard function receives three arguments:
 
-- `route: Route`: the target [Route Object](../api/route-object.md) being navigated to.
+- **`to: Route`**: the target [Route Object](../api/route-object.md) being navigated to.
 
-- `redirect: Function`: calling this function will abort the current navigation and start a new navigation towards the redirect target.
+- **`from: Route`**: the current route being navigated away from.
 
-- `next: Function`: resolve this guard and proceed to the next guard in the pipeline. If there are no hooks left, then the navigation is **confirmed**.
+- **`next: Function`**: this function must be called to **resolve** the hook. The action depends on the arguments provided to `next`:
 
-**If neither `redirect` nor `next` is called, the navigation will be cancelled.**
+  - **`next()`**: move on to the next hook in the pipeline. If no hooks are left, the navigation is **confirmed**.
 
-You can also register global after hooks, however unlike guards, these hooks are much simpler and cannot affect the navigation:
+  - **`next(false)`**: abort the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the `from` route.
+
+  - **`next('/')` or `next({ path: '/' })`**: redirect to a different location. The current navigation will be aborted and a new one will be started.
+
+**Make sure to always call the `next` function, otherwise the hook will never be resolved.**
+
+You can also register global after hooks, however unlike guards, these hooks do not get a `next` function and cannot affect the navigation:
 
 ``` js
-router.afterEach(route => {
+router.afterEach((to, from) => {
   // ...
 })
 ```
@@ -44,7 +50,7 @@ const router = new VueRouter({
     {
       path: '/foo',
       component: Foo,
-      beforeEnter: (route, redirect, next) => {
+      beforeEnter: (to, from, next) => {
         // ...
       }
     }
@@ -61,12 +67,12 @@ Finally, you can directly define route navigation guards inside route components
 ``` js
 const Foo = {
   template: `...`,
-  beforeRouteEnter (route, redirect, next) {
+  beforeRouteEnter (to, from, next) {
     // called before the route that renders this component is confirmed.
     // does NOT have access to `this` component instance,
     // because it has not been created yet when this guard is called!
   },
-  beforeRouteLeave (route, redirect, next) {
+  beforeRouteLeave (to, from, next) {
     // called when the route that renders this component is about to
     // be navigated away from.
     // has access to `this` component instance.
@@ -79,11 +85,11 @@ The `beforeRouteEnter` guard does **NOT** have access to `this`, because the gua
 However, you can access the instance by passing a callback to `next`. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument:
 
 ``` js
-beforeRouteEnter (route, redirect, next) {
+beforeRouteEnter (to, from, next) {
   next(vm => {
     // access to component instance via `vm`
   })
 }
 ```
 
-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 simply not calling `next` or `redirect`.
+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)`.