Vue 路由导航守卫

1.全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行
访问权限的控制

// 创建路由实例对象
const router = new VueRouter({})

// 调用路由实例对象的beforeEach 方法，即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候，都会自动触发fn这个"回调函数”
router.be foreEach(fn)

守卫方法的 3 个形参

全局前置守卫的回调函数中接收 3 个形参，格式为：

// 创建路由实例对象
const router = new VueRouter({})

// 全局前置守卫
router.befooreEach((to,from,next)=>{
    // to 是将要访问的路由信息对象
    // from 是将要离开的路由信息对象
    // next 是一个函数，调用next()表示放行，允许这次路由导航
})

控制后台主页的访问权限：

router.befooreEach((to, from, next) => {
    if (to.path === /main) {
        const token localStorage.getItem('token')
    if (token) {
        next()  //访问的是后台主页，且有 token 值
    } else {
        next('/login')  //访问的是后台主页，但是没有 token 值
    }
}else {
    next()  //访问的不是后台主页，直接放行
}
})

to,from,next
to:表示要去的路由信息
from:表示从何处来的路由信息
next() 调用此函数表示允许通过


1、全局前置守卫 beforeEach((to,from,next)=>{}) 在router/index.js使用

2、全局后置钩子 afterEach((to,from)=>{}) 没有next 在
router/index.js中使用

3、路由独享守卫 beforeEnter(to,from,next){} 在router/routes.js 守卫单个路由

4、组件内的守卫 在组件内使用
beforeRouteEnter(to,from,next){} 组件实例创建之前调用 比beforeCreate还早 无法访问this
beforeRouteUpdate (){} 当动态路由发生改变时触发 手动
beforeRouteLeave(to,from,next){} 组件即将要离开时执行