vue-router 有哪几种导航钩子?

1. 导航钩子有哪些？他们有哪些参数？
2. 导航钩子 翻译过来就是路由的生命周期函数（vue-router）
3. 分为两种 全局和局部
4. 全局钩子函数：
   beforeEach：在路由切换开始时调用
   afterEach：在路由切换离开时调用
   局部到单个路由
   beforeEnter
   组件的钩子函数
   beforeRouterEnter，
   beforeRouterUpdate,
   beforeRouterLeave
5. to:即将进入的目标对象
   from：当前导航要离开的导航对象
   next：是一个函数调用resolve执行下一步
   具体例子如下：
   **

第一种：全局导航钩子

1. 前置守卫

//单独设置每个路由的属性：
在router.js中设置：
 {
     
      path: '/memberCenter',
      name: 'memberCenter',
      component: memberCenter,
      meta: {
     
        title: '台',
        requireAuth: true,//是否需要登录
      },
    },
在最外层的main.js中设置：
router.beforeEach((to, from, next) => {
     
  if (to.matched.some(record => record.meta.requireAuth)){
       // 判断该路由是否需要登录权限
    if (getToken()) {
       // 判断当前的token是否存在
      next();
    }
    else {
     
      next({
     
        path: '/login',
        query: {
     redirect: to.fullPath,requireAuth:to.meta.requireAuth}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
     
    next();
  }
});

注意：此钩子一般用于登录的验证，next 方法必须要调用，否则钩子函数无法 resolved

2.后置钩子

router.afterEach((to,from) => {
     
	if(to.meta && to.meta.title){
     
		document.title = to.meta.title
	}else{
     
		document.title = "666"
	}
})

3.局部到单个路由

{
     
    path: '/home',
    name: 'home',
    component: Home,
    beforeEnter(to, from, next) {
     
        if (window.localStorage.getItem("id")) {
     
            next()
        } else {
     
            next({
      name: "login" })
        }
    }
}

4.组件的钩子函数

beforeRouteEnter(to, from, next) {
     
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
     
    // do someting
    // 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
     
    // do someting
    // 导航离开该组件的对应路由时被调用
}

全局解析守卫
router.beforeResolve 注册一个全局守卫，和 router.beforeEach 类似，