wgjh5#vueSummarize#vue路由钩子函数的实战用法1

#### —— “导航”表示路由正在发生改变。 > 路由钩子函数有三种： > > ​ 1：全局钩子： beforeEach、 afterEach > > ​ 2：单个路由里面的钩子： beforeEnter、 beforeLeave > > ​ 3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave ## 一、 全局守卫 > 无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法 > > router.beforeEach() 进入之前触发 > > router.afterEach() 进入之后触发 #### 1.router.beforeEach（全局前置守卫） ##### api： > 每个守卫方法接收三个参数： > > ①**to: Route**: 即将要进入的目标[路由对象](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1)（to是一个对象，是将要进入的路由对象，可以用**to.path**调用路由对象中的属性） > > ②**from: Route**: 当前导航正要离开的路由 > > ③**next: Function**: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。 > > next参数： > > ​ **next()**: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是**confirmed** (确认的)。 > > ​ **next(false)**: **中断当前的导航。**如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按 钮)，那么 URL 地址会重置到 from 路由对应的地址。 > > ​ **next('/') 或者 next({ path: '/' })**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在[router-link 的 to prop](https://router.vuejs.org/zh/api/#to)或[router.push](https://router.vuejs.org/zh/api/#router-push)中的选项。 > > ​ **next(error)**: (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给[router.onError()](https://router.vuejs.org/zh/api/#router-onerror)注册过的回调。 > > **ps~ : 确保要调用 next 方法，否则钩子就不会被 resolved。** ##### 实战用法： > beforeEach多用于鉴权，写在`main.js`里面或者`router.js`里面判断当前页面未登录，是否能进入，**此时，我们需�