路由守卫

- 监听整个项目的路由变化情况          全局的前置守卫
  - 监听某个路由的变化情况             路由的独享守卫
  - 监听的路由组件的路由变化情况         组件内的导航守卫

导航守卫（也叫路由守卫）

技术标签：导航首位

导航守卫（也叫路由守卫）

作用： — 类似【保安】
- 守卫路由
  - 进
    - 举例：携带数据进
  - 出
    - 举例：事情完成才能出
导航守卫一共有三种形式

- A: 全局导航守卫

. 全局前置守卫 router.beforeEach(fn)

fn中有三个参数
- to:表示要去哪里
- from：表示从哪里来
- next：表示通不通过
- 关于next的使用
  - next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
  - next( false ) 表示不通过，表示从当前路由跳转不到目标路由
  - next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由
  - next(’/login’) 等价于 next({path:’/login’,params,query})
  - next( fn ) 数据预载

全局前置守卫是写在入口文件 main.js 中的，在进入路由前执行

// 全局前置路由守卫
router.beforeEach( (to,from,next) =>{
    const name = localStorage.getItem('name');//查看本地存储上是否有name对象
    if( name || to.path === '/login'){//短路逻辑，有就可以继续执行，没有就跳转到登录页面
        next()
    }else{
     next( '/login' )//跳转登录页面
    }
})
// 全局后置路由守卫 router.afterEach(fn)，表示离开当前路由时执行
router.afterEach( (to,from,next)=> {
    if(to.path === '/user'){//当to的path值等于这个时
        alert('确定进入user吗')
    }
})

全局的解析守卫
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
必须保证整个项目的守卫和异步路由组件解析完成
全局的后置守卫 afterEach(fn)
- 可以做一些用户友好提示

代码在上面

B: 路由独享守卫

写在路由表中的守卫钩子

针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的

{
path: ‘/user’,
component: User,
beforeEnter: ( to,from,next ) =>{

// console.log(to)
const name = localStorage.getItem('name');//判断本地存储有没有name对象
if( name){//存在就可以继续执行
    next()
}else{
    setTimeout(()=>{
            alert('你还没有登录，点击跳转登录')//不存在就弹窗告诉没有登录，点击登录
            next('/login')
        },0)
   }
}

C: 组件内守卫

有三种
- beforeRouteEnther( (to,from,next) =>{} ) 进入组件时触发【 //注意写法，fore route 】
- beforeRouteUpdate( (to,from,next) =>{} ) 数据改变时触发
- beforeRouteLeave( (to,from,next) =>{} ) 离开组件时触发
组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
- 导航进入组件时，调用
- this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
- 因为组件此时没有创建，所以没有this
- 案例：数据预载（进入组件前就获得数据）
next(vm => { //vm指的就是组件
```
const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
vm.$set(vm.category,'categorys',result)
```
})

组件内的后置守卫

离开组件时，调用

this是可以访问到

//判断两个输入框是否有值输入，有就可以直接离开，没有弹窗告诉确定是否离开，防止误触
beforeRouteLeave(to,from,next){

if(this.username && this.pwd){
    next()
}else{
    if(confirm('你确定要离开吗')){//返回一个布尔值
        next()
    }else{
        next(false)
    }
}

}

组件内的更新守卫（路由传参和路由的接参）

在当前路由改变，但是该组件被复用时调用
举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
可以访问组件实例 this

在这里插入图片描述

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的beforeRouterUpdate可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。

一、全局前置守卫beforEach

守卫方法接收三个参数：
- to：即将要进入的目标路由对象
- from：当前导航正要离开的路由
- next：执行下一步 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。