Vue 路由守卫

一.全局守卫

在router中配置全局守卫——登录拦截

Vue 路由守卫_第1张图片

二.组件内的守卫

组件路由守卫分为到达这个组件时,离开这个组件时

1. beforeRouteEnter:(to,from,next)=>{}——到达

        to,from参数与上面使用方法一致。next回调函数略有不同。

2. beforeRouteLeave:(to,from,next)=>{}——离开

        点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。
 

Vue 路由守卫_第2张图片

三.路由独享的守卫

1. beforeEnter:(to,from,next)=>{}

        与全局路由守卫用法一致,但是只能针对一个页面使用

Vue 路由守卫_第3张图片

 

你可能感兴趣的:(vue.js,前端,javascript)