导航守卫又称为路由守卫

路由进阶部分 – 导航守卫（ 路由守卫 ）

1. 作用： — 类似 【保安】

   • 守卫路由
     • 进
       • 举例： 携带数据进
     • 出
       • 举例： 事情完成才能出

2. 导航守卫一共有三种形式

   1. 全局导航守卫用的时候写在主文件中(main.js),全局的

      1. 全局前置守卫 router.beforeEach(fn)
         • fn中有三个参数

      //to:去往的目标点
      //from:当前的木标点
      //next：流程    当参数为false时 不可以进行跳转，为空或者true时才可以
      router.beforeEach(( to , from , next )=>{
          const name = localStorage.getItem('name')
          if( name || to.path === '/my'){
              next()
          }else{
              next('/my')
          }
      })
      

      2. 全局的解析守卫(不常用)
      3. 全局的后置守卫 router.afterEach(fn)
         1. 可以做一些用户友好提示
         2. 与全局前置守卫参数相同

   2. 路由独享守卫 beforeEnter(to,from,next)

      1. 写在路由表中的守卫钩子
      2. 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
      3. 可用于用户权限管理
      4. 与全局前置守卫参数相同

      const routes = [
           {
               path: '/',
               redirect: '/home'
           },
           {
               path: '/home',
               component: Home
           },
           {
               path: '/category',
               component: Category,
               beforeEnter ( to,from,next ) {
               alert('您要进入吗')
               next()
               //业务： 用户权限管理
               }
           },
           {
               path: '**',
               redirect: '/error'
           }
        ]
      

   3. 组件内守卫

      1. 组件内的前置守卫beforeRouteEnter((to,from,next)=>{})

         • 导航进入组件时，调用
         • 因为组件此时没有创建，所以没有this
         • this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
         • 案例： 数据预载（进入组件前就获得数据）

             next(vm => { //vm指的就是组件
                const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
                vm.$set(vm.category,'categorys',result)
              })
         

      2. 组件内的后置守卫

         • 离开组件时，调用
         • this是可以访问到

         beforeRouteLeave (to, from, next) {
             //我们现在已经要离开这个组件，那么这个组件身上的数据和方法等内容我们肯定可以获取到，也就是说这里可以使用 this
             if( this.username || this.password){
             if( confirm('您已经填写结束了吗?')){
                 next()
             }else{
                 next(false)
             }
             }else{
             	next()
             }
         }
         

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

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

          beforeRouteUpdate ( to,from,next ) { //动态路由用
              console.log('路由改变了')
              next()
          }
         

总结 路由导航守卫

1. 3种类型 7个路由监听钩子
2. 业务：
   • 监听整个项目的路由变化情况
     • 全局的前置守卫
   • 监听某个路由的变化情况
     • 路由的独享守卫
   • 监听的路由组件的路由变化情况
     • 组件内的导航守卫