"vue-router有哪几种导航守卫？"

全局守卫：

• router.beforeEach 全局前置守卫，进入路由之前
• router.beforeResolve 全局解析守卫，在beforeRouterEnter调用之后调用
• router.afterEach 全局后置钩子，进入路由之后

//main.js  入口文件
import router from ’./router‘
router.beforeEach(to,from,next)=>{
    next();
}
router.beforeResolve(to,from,next)=>{
    next();
}
router.afterEach(to,from)=>{
    console.log('全局后置钩子')
}

路由独享守卫：

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

路由组件内的守卫：

• beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this，组件实例还没被创建
• beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this
• beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this

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