什么是路由守卫

路由守卫就是当⻚⾯跳转的时候会触发的钩⼦函数,
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//---是写在路由配置里边的
  }
 }
 ]

路由导航守卫扩展

我理解的导航守卫 就是一座房子的保安 只有保安允许了才能访问页面

之前说三种六个 还有一个用的不是很多的全局守卫 叫做全局解析守卫 beforeResolve

导航守卫一共有三种
1、全局的守卫 守卫所有的页面
beforeEach 路由前置守卫
beforeResolve 路由解析之前
afterEach 路由离开

全局守卫 beforeEach 和 beforeResolve 的区别

他们两个都会在路由跳转前就执行 参数都是 to from next
他们两个的区别 执行的时机不一样 beforeEach 是在路由规则被循环之前执行
beforResolve 是在组件被解析之后调用 beforeEach 要比 beforResolve 先执行

2、组件守卫 守卫单个组件
beforeRouteEnter 路由进入
beforeRouteUpdate 路由更新
beforeRouteLeave 路由离开

3、独享守卫 守卫单个页面
beforeEnter 路由进入之前

三种守卫全局 组件 独享守卫的区别：

1. 作用范围不同 全局作用于所有页面 组件作用于单个组件 独享也是守卫单个页面
2. 代码写的位置不一样 全局守卫写在 router/index.js 中 组件守卫写在组件里 跟 data 同级 独享守卫写在路由规则里
3. 执行顺序有区别 执行的顺序要记下来
   beforeEach 前置守卫
   beforeEnter 独享守卫
   beforeRouteEnter 组件守卫
   beforeResolve 解析守卫
   afterEach 路由后置守卫