[TOC]
### 路由全局前置守卫
* [ ] 作用: 页面进入之前的逻辑判断
* [ ] 定义:router.js
```
import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes
})
/**
* 路由前置全局守卫
* @params to 当前路由对象
* @params from 上一次访问的路由对象
* @params next 向下执行
*/
router.beforeEach( (to, from, next) => {
})
export default router
```
*****
### 路由全局后置守卫
* [ ] 作用:页面跳转之后的操作,例如用户访问页面之前有Loading效果,访问页面之后,可以用该钩子函数结束Loading效果
* [ ] 定义:router.js
```
import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes
})
/**
* 路由前置全局守卫 页面进入之前处理逻辑
* @params to 即将跳转的路由对象
* @params from 即将离开的路由对象
* @params next 跳转函数
*/
router.beforeEach( (to, from, next) => {
})
/**
* 路由跳转之后的操作
* @params to
* @params from
*/
router.afterEach( (to, from) => {
// 用户页面跳转之后的简单逻辑判断,比如关闭loading效果
})
export default router
```