Vue.js中的路由进阶(导航守卫（ 路由守卫 ))

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

1. 作用： --- 类似 【保安】
   • 守卫路由
     • 进
     • 举例： 携带数据进
     • 出
     • 举例： 事情完成才能出
2. 导航守卫一共有三种形式
   • A: 全局导航守卫(放置在main.js文件里)
     1. 全局前置守卫 router.beforeEach(fn)

               router.beforeEach((to,from,next) => {
                   const name=localStorage.getItem('name');
                   if(name==='hqg' || to.path==='/login'){//如果name为真就true,为假就false
                       next()
                   }else{
                       next('/login')
                   }
               })
        

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

        router.afterEach( (to,from) => {
             //举例
            if( to.path === '/reg'){
            confirm('请确定要进入注册页吗？')
          }
        })
     

   • B: 路由独享守卫(在index.js的路由表中写)
     • 写在路由表中的守卫钩子
     • 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的

        beforeEnter: (to,from,next) => {
             const name = localStorage.getItem('name')
             if( name || to.path === '/user'){
                next()
             }else{
                setTimeout( ()=> {
                  alert('您还没有登录账号，3秒后自动跳转到登录页')
                  next('/login')
                },3000)
             }
            }
       

• C: 组件内守卫
  • 组件内的前置守卫 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.password){
                    next()
                }else{
                    if(confirm('表单还没填完,你真的要离开吗?')){
                        next()
                     }else{
                        next(false)
                   }
                }
           }
      

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

          beforeRouteUpdate ( to,from,next ) {
              console.log('update')
              next()
          }
      }
      

3. 功能： 导航守卫可以监听路由变化情况
4. 名词
   • 前置： 要进入当前路由 --- 老师进入教室前
   • 后置： 要离开当前路由 --- 老师离开教室
5. 关于next的使用
   • next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
   • next( false ) 表示不通过， 表示从当前路由跳转不到目标路由
   • next('/login') 等价于 next({path:'/login'}) 跳转指定的路由
   • next('/login') 等价于 next({path:'/login',params,query})
   • next( fn ) 数据预载
6. 业务： 当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页

      router.beforeEach((to,from,next)=>{
          const name = localStorage.getItem('name')
          if( name || to.path === '/login' ){
            //如果有   /  -->  /home
            next()
          }else{
            next('/login')
          }
      })

7. 业务： 当进入mine页面的时候， 要判断用户是否登录，如果没有登录，跳转登录页

   beforeEnter: (to,from,next) => {
      const name = localStorage.getItem('name')
      if( name || to.path === 'user'){
          next()
      }else{
          setTimeout( ()=> {
              alert('您还没有登录账号，3秒后自动跳转到登录页')
              next('/login')
          },3000)
      }
   }
   

8. 路由导航守卫

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

9. 动效
10. 路由懒加载

转载于:https://www.cnblogs.com/h5hu/articles/10787603.html