Vue路由守卫

全局路由守卫

前置守卫路由

调用时机：1、初始化 2、路由跳转之前

主要作用是登录验证,还没跳转前就查看是否有权限,然后告知

const routes = [
  {
    path:'/homePage',
    name:'homePage',
    component:() =>import('@/components/HomePage.vue'),
    meta : {
        isAuth:true,title:'主页'
    },
]

const router = new VueRouter({
  routes
})

// 全局前置路由守卫-=调用时机：1、初始化 2、路由跳转之前
// 主要作用是登录验证,还没跳转前就查看是否有权限,然后告知
router.beforeEach((to,from,next)=>{
  console.log('前置路由守卫to:',to,'from:',from,'next',)
  if (to.meta.isAuth){
    if(localStorage.getItem('school')==='chensu'){
      next()
    }else{
      alert('学校名不对，无权限查看！')
    }
  }
  else {
      next()
  }

})

export default router

to代表要跳转组件的路由信息

from代表原本组件的路由信息

next（）代表可以进行跳转

meta属性代表“路由元”，里面可以自定义属性名和属性值

后置守卫路由

调用时机：1、初始化； 2、路由跳转之后

应用场景：跳转之后给每页指定一个标题

router.afterEach((to,form)=>{
  if (to.meta.title){
    document.title = to.meta.title;
  }else {
    document.title = 'vue辰苏前端'
  }
})

独享路由守卫