路由导航vue-router提供的导航守卫主要用于守卫跳转或取消的导航（相当于保安）。我们需要通过路由来进行一些操作，比如最常见的登录权限验证。当用户满足条件时，允许他进入导航，否则，跳转被取消，跳转到登录页面，让他登录。为此我们有很多方法来嵌入导航过程路由的：全局的，特定于单个路由或组件级别。注意：参数或查询的更改不会触发进入/退出导航守卫（您可以通过观察$route对象来响应这些更改，或者使用beforeRouteUpdate组件内守卫。）全局守卫功能所有路由配置组件都会被触发。说白了就是触发路由的时候会触发这些钩子函数。vue-router中全局一共有三个守卫：router.beforeEach进入路由前的全局pre-guardrouter.beforeResolve全局解析守卫（2.5.0+）beforeRouteEntercall之后调用router.afterEach进入路由后的全局post-hook。beforeEach在路由跳转之前触发。参数包括to、from、next（参数单独介绍）。这个钩子主要用于登录验证，也就是路由还没有跳转的时候提前通知，以免跳转之后通知来不及。to,from,next这三个参数是to：Route：要输入的目标路由对象是this.$route，如：to.path与this.$router.path是一样的。from:Route:当前导航即将离开的路线next:Function:该参数为函数，必须调用，否则无法进入该路线（页面为空白）。一定要调用这个方法来解析这个hook，否则路由会在这里中断，不会继续执行。执行效果取决于next方法的调用参数。效果等同于释放。next()：继续执行管道中的下一个挂钩。如果所有的钩子都被执行??，则导航的状态被确认（confirmed）。即直接跳转到next(false)所指向的路由：中断当??前导航。如果浏览器的URL发生变化（可能是用户手动或浏览器的后退按钮），URL地址将被重置为与from路由对应的地址。next('/')或next({path:'/'})：跳转到不同的地址。当前导航被中断并开始新的导航。您可以将任何位置对象传递给next，它允许设置诸如replace:true、next({name:'home'})之类的选项，以及路由器链接的toprop或router.push中使用的任何选项。next(error):(2.4.0+)如果传递给next的参数是一个Error实例，导航将被终止，错误将被传递给注册到router.onError()的回调。确保调用next方法，否则钩子将无法解析。constrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{//...####beforeResolve(2.5+)这个钩子类似于beforeEach，它是同样是路由跳转触发前，参数也是to，from，next，和beforeEach的区别官方解释为：,解析守卫被调用。也就是组件中的beforeEach和beforeRouteEnter之后，在afterEach之前调用。####afterEach与beforeEach相反，在路由跳转完成后触发，参数包括to，from,.没有next,navigation本身不会改变.,它发生在beforeEach和beforeResolve之后，beforeRouteEnter之前（in-componentguard）。router.afterEach((to,from)=>{//...})###路由的独占守卫是指在单个路由中配置的ca的钩子函数n也可以随时设置，即组件中存在这样的钩子函数。目前只有一个beforeEnter守护的钩子函数。和beforeEach完全一样，如果都设置了，会在beforeEach之后立即执行，参数为to,from,nextconstrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})###组件中的守卫可以在路由组件中直接定义如下路由导航守卫，也可以说是执行在组件钩子函数中。类似于组件中的生命周期，相当于在配置路由的组件中添加了生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2+)和beforeRouteLeave。...exportdefault{data(){//...},beforeRouteEnter(to,from,next){//在渲染组件的相应路由被确认之前调用//否！有能力的！获取组件实例`this`//因为在守卫执行之前还没有创建组件实例},beforeRouteUpdate(to,from,next){//当前路由变化时调用，但是组件被复用//为例如说，对于一个带动态参数的路径/foo/:id，当在/foo/1和/foo/2之间跳转时，//因为会渲染同一个Foo组件，所以组件实例会被复用。在这种情况下将调用此钩子。//当前路由的query发生变化时，会调用guard//可以访问组件实例`this`},beforeRouteLeave(to,from,next){//导航离开对应的路由时调用component//可以访问组件实例`this`}}
