Vue之路由钩子函数

router的beforeEach()函数和afterEach()函数

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。比如说登录的权限。

定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue里面提供了路由的三大类钩子，两种函数
三大类钩子：
1、全局钩子
2、某个路由的钩子
3、组件内钩子

两种函数：

Vue.beforeEach(function(to,form,next){})  /*在跳转之前执行*/
Vue.afterEach(function(to,form) )/*在跳转之后判断*/

1、全局钩子函数

全局钩子函数在入口文件main.js中定义

router.beforeEach((to, from, next) => {
    let token = router.app.$storage.fetch("token");
    let needAuth = to.matched.some(item => item.meta.login);
    if(!token && needAuth) return next({path: "/login"});
    next();
});
//判断是否有token,如果有，则说明保持着登录状态，如果没有，则要重新登录

beforeEach函数有三个参数：

• to:router即将进入的路由对象
• from:当前导航即将离开的路由
• next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

2、某个路由的钩子函数

顾名思义，它是写在某个路由里头的函数，本质上跟组件内函数没有区别。
可在router文件夹中的router.js文件中：

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

3、路由组件的钩子

注意：这里说的是路由组件！
路由组件 属于 组件，但组件 不等同于 路由组件！所谓的路由组件：直接定义在router中component处的组件。如：

var routes = [
    {
    path:'/home',
    component:home,
    name:"home"
    }
]

在子组件中调用路由的钩子函数时无效的。
在官方文档上是这样定义的：

可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

路由钩子函数的用法：它与data，methods是平级的

beforeRouteLeave(to, from, next) {
    next()
},
beforeRouteEnter(to, from, next) {
    next()
},
beforeRouteUpdate(to, from, next) {
    next()
},
data:{},
method: {}

转载于文档：https://www.cnblogs.com/WQLong/p/8135553.html