Vue | 路由守卫面试常考

前言

Vue Router 路由守卫

导图目录

路由守卫分类

全局路由守卫

//全局验证路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// 白名单， 不需要验证的路由
const whiteList = ['/','/register']

router.beforeEach((to,from,next)=>{
  if(whiteList.indexOf(to.path) === 0) {
    // 放行，进入下一个路由
    next()
  } else if(!(sessionStorage.getItem('token'))){
    next('/');     
  } else {
    next()
  }  
})

beforeEach

beforeResolve

afterEach

单个路由独享

beforeEnter

      {
        path:'/superior',
        component: Superior,
        meta:{
          icon:'el-icon-s-check',
          title:'上级文件'
        },
        beforeEnter:(to,form,next) =>{
          
        }
      }

组件路由守卫

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

路由守卫执行的完整过程

结语