[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
```