Vue.js——路由全局前置&后置守卫(钩子)

前言： 不知不觉走在编程的路上已经一个年头多些，在自学的前部分时间都在看别人写的程序。最近这几个月几乎都在自己捣鼓程序…导致很少去吸收别人写的程序的优点。回到正题~最近在玩vue社区的一个很有名的框架iView，并且也在看它生态中的iView Admin模板。刚开始就掉坑了…

全局前置守卫（钩子）

基础语法：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

从名字全局前置守卫不难理解，它是全局的，即对 整个单页应用（SPA） 中的所有路由都生效，所以当定义了全局的前置守卫，在进入每一个路由之前都会调用这个回调，那么如果你在回调中对路由的跳转条件判断出错，简单点就是死循环…因为你遗漏了某种路由跳转的情况，守卫会一直执行。所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。

应用场景

在iView Admin中全局前置守卫的应用场景就是对用于访问网页的情况进行相应的跳转，例如初次登入，不能访问除登录页面外的页面，已登录会自动跳转自首页等等。
代码：

router.beforeEach((to, from, next) => {
    //开启懒加载
    iView.LoadingBar.start()
	//获取token
	const token = getToken()
	if (!token && to.name !== LOGIN_PAGE_NAME) {
	    // 未登录且要跳转的页面不是登录页
	    next({
	        name: LOGIN_PAGE_NAME // 跳转到登录页
	    })
	} else if (!token && to.name === LOGIN_PAGE_NAME) {
	    // 未登陆且要跳转的页面是登录页
	    next() // 跳转
	} else if (token && to.name === LOGIN_PAGE_NAME) {
	    // 已登录且要跳转的页面是登录页
	    next({
	        name: 'home' // 跳转到homeName页
    	})
	}
})

注：至于代码中的令牌token就是通过cookie存储的一个键值对，详细代码大家可以自行去GitHub下载源码。

全局后置守卫（钩子）

基础语法：

router.afterEach((to, from) => {
  // ...
})

理解了全局前置守卫，那么全局后置守卫也就那么一回事。全局后置守卫是整个单页应用中每一次路由跳转后都会执行其中的回调。所以多用于路由跳转后的相应页面操作，并不像全局前置守卫那样会在回调中进行页面的重定向或跳转。

应用场景

应用场景前面以及提了就是对跳转后的页面进行例如滚动条回调0 0 位置、更新页面title、懒加载结束等等
代码：

router.afterEach((to, from) => {
    setTitle(to, router.app)
    iView.LoadingBar.finish()
    window.scrollTo(0, 0)
})