3.11.1.vue-router中的全局钩子函数在vue-router中，当路由发生变化时，我们可以做一些事情，比如：我们可以决定是否进入导航，我们可以决定跳转到Where，也叫navigationguard在官方文档中。我们先来看一个全局的钩子函数。官方文档叫registeringaglobalpre-guard，使用router.beforeEach方法实现router.beforeEach(()=>{console.log('beforeEachexecuted....')})这里的beforeEach可以理解作为每个导航进入前挂起的钩子，它会在每次导航进入前启动，可以在beforeEach中做一些事情，比如阻止进入导航，执行上面的代码，我们会发现，当我们点击对应的导航时，相应的组件无法渲染。罪魁祸首是这个beforeEach。当我们稍微修改代码时router.beforeEach((to,from,next)=>{console.log('beforeEachexecuted....')next()})每个路由钩子函数接收三个参数：to:Route:要进入的目标路由对象from:路由:当前导航下一个即将离开的路由:功能:必须调用此方法来解析此钩子。下一个是函数。如果没有调用next方法，则不会进入nexthook。我们可以用它来实现跳转或者取消在写具体的跳转或者取消case之前，插入一个前置知识点：路由元信息路由元信息就是为每条路由记录配置一个元字段。字段配置好之后，就可以在需要的地方使用了。配置示例：{path:'/',components:{default:Home,a:HomeSider,b:HomeMain},meta:{isLogin:true}}我们可以得到meta字段值router.beforeEach((to,from,next)=>{console.log('beforeEachexecuted....')if(to.meta.isLogin){next()}else{next(false)}})在next函数中传false表示不进入导航。我们在meta字段配置isLogin，使用时通过to.meta.isLogin来判断。如果值为真，则执行下一步。如果值为false就执行next(false)next函数也可以传入一个路由地址，它会自动跳转到改地址。我可以稍微修改一下上面的代码('/login')}})除了在导航进入之前有一个钩子函数，在导航进入之后还有一个钩子函数，叫做afterEach，使用方法和beforeEach类似，因为afterEach有执行时已经进入导航，所以没有第三个参数nextrouter.afterEach((to,from)=>{console.log('afterEachisexecuted....')//判断是否有title字段if(to.meta.title){window.document.title=to.meta.title}else{window.document.title='ScrewClassroom'}})#3.11.2.vue-router中路由记录中写的钩子函数beforeEnter在进入导航前调用，需要在路由记录中配置{path:'/course',component:Course,meta:{isLogin:false,title:'Course|ScrewClassroom'},beforeEnter(to,from,next){console.log('beforeEnterwasexecuted')}}#11.3.vue-router中组件内部写的钩子函数1.beforeRouteEnter，在Called在导航进入之前，在这个函数中是获取不到的，因为要渲染的组件还没有创建beforeRouteEnter(to,from,next){console.log('beforeRouteEnterintheusercomponentexecutes')next()}2.beforeRouteUpdate，当当前路由发生变化但组件被复用时调用，例如对于路径/foo/动态参数：id，在/之间跳转时foo/1和/foo/2，因为将渲染相同的Foo组件，组件实例将被重用，在这种情况下将调用此钩子。可以访问组件实例thisbeforeRouteUpdate(to,from,next){console.log('执行用户组件中的beforeRouteUpdate')next()}3.beforeRouteLeave，导航离开组件对应路由时调用，你可以访问组件实例thisbeforeRouteLeave(to,from,next){console.log('beforeRouteLeaveintheusercomponentwasexecuted')next()}
