next('https://www.jb51.net/') 或者 next({ path: 'https://www.jb51.net/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。
3.2 全局解析守卫： router.beforeResolve ，这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
3.3 全局后置钩子： router.afterEach ，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from)=>{ console.log("....afterEach....") console.log(to) console.log(from) })
3.4 路由独享守卫： beforeEnter ，参数和全局前置守卫一样，执行顺序在全局前置守卫之后，在全局解析守卫之前。router.js中部分测试代码：
{ //动态路径参数，以冒号开头，如果有多个参数则继续往后面追加 path: '/pageA/:id/:name', name: 'pageA', component: PageA, //路由独享的守卫 beforeEnter: (to, from, next) => { console.log(".....路由独享的守卫...beforeEnter...") console.log(to) console.log(from) console.log(next) next(); } },
3.5 组件内路由守卫。进入组件时、组件路径参数变化时，离开组件时分别监听。
<script> export default { name: 'pageA', //组件内的守卫 beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 console.log('...组件内守卫beforeRouteEnter...') console.log(to) console.log(from) next(); }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` console.log('...组件内守卫beforeRouteUpdate2222...') console.log(to) console.log(from) next(); }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console.log('...组件内守卫beforeRouteLeave3333...') console.log(to) console.log(from) next(); } } </script>
注意： beforeRouteEnter 守卫卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }
beforeRouteEnter 是支持 给next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this已经可用了，所以不支持传递回调，因为没有必要了。
beforeRouteLeave 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteLeave (to, from , next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } }
完整的导航解析流程
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter 。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter 。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
----------------------- 导航守卫调用步骤记录 ---------------