vue的三种路由守卫

路由守卫就是当⻚⾯跳转的时候会触发的钩⼦函数,
vue⼀共给我们提供了三种路由守卫

全局路由守卫

前置守卫：

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

to-到哪里去 from --从哪里来 next–重定向

 //路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权

router.beforeEach((to,from,next) => {
 const token = store.state.koten;
 if(!token && to.name!='Login'){//如果没有token 并且当前页不是登陆页
  next("login")//去登陆页
 {
 if(token && to.name=="Login"){//如果有token 并且当前页是登陆页
  next("/")//去首页
 }
 next()//如果有token 并且当前页不是登陆页,则继续它的操作

后置守卫：

router.afterEach((to,from) => {})
//！！！！没有next

组件级路由守卫

beforeRouteEnter(to,from,next){}//---路由进入之前
beforeRouteUnpdate(to,from,next){}//---路由更新之前(特定的值 组件没变 ---路由变了--动态路由)
beforeRouteLeave(to,from,next){}//---路由离开之前

独享守卫

 const routes = [
 {
  path:"/",
  name:"Home",
  component:Home,
  beforeEnter(to,from,next){
   console.log(to,from,next)
   //beforeEnter//---是写在路由配置里边的
  }
 }
 ]