【Vue】导航守卫

一、导航守卫

路由跳转时进行验证

二、全局前置守卫🔺

进入路由之前拦截

1、route.beforeEach() 注册全局前置守卫
2、语法:

router.beforeEach((to,from,next)=>{
  		……
 })

三个参数：

• to:去哪里(页面)
• from:从哪里来(页面)
• next:如果参数里有next，则方法体中必须加上next方法；

next方法:

• next("/path")：跳转到path页面；path可以任意
• next(false)：中断当前路由
• next()：正常执行

三、全局解释守卫

在进入路由之前，所有组件守卫和异步组件之后调用
1、route.beforeResolve() 注册全局解释守卫
2、语法与全局前置守卫类似

四、全局后置钩子函数

在进入路由之后调用
1、route.afterEach() 注册全局后置钩子
2、与前两个不同的是，他没有next

五、路由独享守卫

在路由配置上直接定义守卫，只对当前页面(要进入当前页面时)进行拦截
beforeEnter

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter:(to,from,next)=>{
        next();
    }
  },

语法与前置前置守卫相同

六、组件内守卫

• beforeRouteEnter(to,form,next):
  在渲染组件对应的路由被confirm前调用，没有创建组件，所以没有this实例
  但是可以在next函数写回调函数 访问当前组件实例
  例：next(vm=>{ //通过 vm访问当前组件实例 })

• beforeRouteUpdate(to,form,next)
  在组件路由参数被修改时，被调用

• beforeRouteLeave(to,form,next)
  离开组件对应的路由时，被调用

例：

<script>
export default {

  data(){

  },
  beforeRouteEnter(to,from,next){
      next();
  }
}
</script>

七、完整的导航分辨率流程

• 1 导航已触发。
• 2 已停用组件中的呼叫防护。beforeRouteLeave-
• 3 呼叫全局防护。beforeEach
• 4 调用重用组件中的保护。beforeRouteUpdate
• 5 呼叫路由配置。beforeEnter
• 6 解析异步路由组件。
• 7 调入激活的组件。beforeRouteEnter
• 8 呼叫全局防护。beforeResolve
• 9 导航已确认。
• 10 调用全局挂钩。afterEach
• 11 已触发 DOM 更新。
• 12 传入到具有实例化实例的 guards 中的回调。nextbeforeRouteEnter

八、路由元信息

定义路由时配置meta字段，做路由的路由记录

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    //meta字段：自定义 随便写
    // 例如 这里打算做一个是否需要登录
    meta:{
        isLogin:true
    },