路由钩子函数介绍：

我之前有介绍过vue里的钩子函数，有四对，也就是八个钩子函数。在路由里呢，其实也有钩子函数，个数相对来说比较少，只有两个：一个是进入路径之前，另一个是离开路径之前这两种钩子函数。

路由器里的钩子函数配置方式介绍：

这两个钩子函数有两种配置方式，一种是在配置路由的router.js里，另一种是在模板里进行配置。钩子函数在不同的配置方式里，其函数名略有不同。

1. Router.js里配置路由钩子函数：

所谓钩子函数就是时机函数，如同我们完成一件事分几个步骤，每个行为步骤即为钩子函数。我们在跳转到一个页面或者说一个路径后是一个结果，其之前还有一个步骤就是进入路径之前的动作，这个动作就是beforeEnter-进入路径之前。既然是针对某个路径的，那么这个钩子函数肯定是要写在某个配置的路径下的。

router里.jpg

我们要跳转到About.vue里，我们就在其配置里设置：

{
     path: '/about',
     name: 'about', 
     component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
     beforeEnter: (to, from, next) => {
         console.log(to)
         console.log(from)
         next()
     }   
},

PS: next()有一个参数false或true，如果不写的话就默认是true。Next()是什么意思呢，是一个闸门的意思，如果打开，就允许你进入路径，如果不放行，就跳转不了路径。如果不写next()我们同样也跳转不了路径。所以在项目开发中一定不要忘记这句话噢

那beforeLeave呢？有小伙伴们说肯定和beforeEnter一样的配置呗！NONONO〜经过测试，beforeLeave在路由里配置是不起任何作用的。那要怎样？这就引出了我们另一种配置方式：模板里配置路由钩子函数。

2. 模板里配置路由钩子函数介绍：

我们进入到About.vue里进行设置。这里配置与路由里配置稍有不同，这里的进入路径之前的函数名是：beforeRouteEnter，离开路径之前的函数名是：beforeRouteLeave

模板里.jpg

在模板里配置路由钩子函数与vue里的钩子函数的写法是一样的。

beforeRouteEnter: (to, from, next) => {
   console.log(“进入路径之前”)
    next()
},  
beforeRouteLeave: (to, from, next) => {
   console.log(“离开路径之前”)
    next()
},   

PS：同样需要注意的是，next()一定不要忘记写上。

就到这里了，休息休息一会儿吧：）明天继续加油噢！

微信公众号：duzhan99