vue-router导航钩子

路由钩子有三种：
1、全局钩子：beforeEach、afterEach
2、某个路由独享的钩子：beforeEnter
3、组件中的钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

1、全局钩子函数

(1)beforeEach(全局前置钩子）
进入路由之前被调用，通常用于进行判断登录状态、鉴定权限等

import Vue from 'vue'
import Router from 'vue-router'
import Home from './compontent/Home'
import About from 'compontent/About'

Vue.use(Router)

const router = new Router({
	routes:[
		{
			path:'/',
			name:'Home',
			compontent:Home
		},{
			path:'/about',
			name:'About',
			compontent:About,
			meta:{
				auth:true //该路由需要登录权限
			}
		}
	]
})

router.beforeEach(to,from,next) => {
if(to.matched.some(res => res.meta.auth)) {
	if("已登录") {
		next()
	}else{
	next({
		path: '登录路由地址',
		query:{redirect:to.pullPath}
		})
		}
	}else{
		next()
	}
})

export defalut router

(2)afterEach
进入路由之后被调用，与beforeEach不同的是，这个钩子只接收两个参数，不能改变路由跳转。

2、某个路由独享的钩子函数

beforeEnter，在路由配置中直接定义

const router = new Router({
	routes:[
		{
			path:'/',
			name:'Home',
			compontent:Home,
			meta:{title:'首页'},
			beforeEnter(to, from, next) {
				next()
			}
		},{
			path:'/about',
			name:'About',
			compontent:About,
			meta:{
				title: '关于',
				auth:true //该路由需要登录权限
			}
		}
	]
})

3、组件内的钩子函数

（1）beforeRouteEnter
进入组件前被调用，此时组件实例还没有被创建，所以函数内部不能访问this，如果需要访问当前vue实例，可以通过next()方法的回调函数接收一个vm实例

export default {
	data() {
		return {
			msg:'这是消息'
		}
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			console.log(vm.msg)
		})
	}
}

（2）beforeRouteUpdate
在路由发送变化，但是组件被复用时别调用

（3）beforeRouteLeave
离开组件时被调用，可以用来阻止页面离开，或者离开前销毁定时器等

export default {
	beforeRouteLeave(to, from, next) {
		window.clearInterval(this.timer)//清除定时器
		next()
	}
}

to：路由跳转目标路由对象
from：路由跳转离开路由对象
next：是一个函数，必须被执行，否则不会进行路由跳转。next（）参数为URL路径，则会发生重定向。