Vue Router之导航守卫
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
在讲解导航守卫前，我们需要理解几个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
一、全局守卫
1.全局前置守卫 router.beforeEach
// 配置路由 const router = new VueRouter({ ... }) //全局守卫的回调函数 router.beforeEach((to, from, next) => { // 这里执行具体操作 // 如果没有next() 的话将不会进行跳转 })
这里的 to 是目标路由对象
from 是当前路由对象
next 是执行函数
例子：
// 配置路由 const router = new VueRouter({ routes:[ {path:'/', components:{ //嵌套命名，将component加s default为默认路由 default:Home, theWork1:work1, theWork2:work2, theWork3:work3 }}, {path:'/works',component:Works,name:'WorksLink',redirect:'works/work1', children:[ {path:'work1',component:work1}, {path:'work2',component:work2}, {path:'work3',component:work3} ] }, {path:'/about',component:About}, {path:"*",redirect:'/'} //默认跳转 ], mode:'history' }) router.beforeEach((to,from,next)=>{ console.log("你想要进行跳转") })
点击跳转，观察。
这里，我们点击发现，钩子已经执行了，由于没加next()所以不会进行跳转。
如果你学过ES6的话，你会发现导航守卫和我们的Proxy代理非常相似。
ok，加上next() 就可以正常跳转。
这个有什么用呢？
当当前访问的页面必须登陆的用户才能访问，我们就可以使用这个。
在进行 next 跳转之前，判断是否登陆，如果没登陆，就可以 跳转到登陆界面，让用户登陆。
2.全局后置守卫 router.afterEach
按照套路，既然有before 那么很可能就有 after ，全局守卫也有afterEach。
由于，是在跳转后执行，所以不再接收next参数（我都跳转了，还要他干嘛！）
router.afterEach((to, from) => { //不接收next函数
// 你想做的事
})
二、 路由独享的守卫
直接在配置路由是添加 beforeEnter
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // 三个参数和全局守卫一样 // 仅在该组件上生效，不影响全局守卫 } } ] })
三、组件内的守卫
在组件内使用，如下：
<template> <div> <h1>About</h1> <h3>hi {{name}}</h3> </div> </template> <script> export default { name: 'About', data(){ return { name: 'YoungAm' } }, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 next(vm=>{ vm.name = "我是新名字" }) }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` next() }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` next() } } </script>
注意，在 beforeRouteEnter 时，组件未被实例化，所以无法访问this。
在next中添加回调，此时 vm.name 相当于 this.name
