前端
一点也不简单

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. 全局的解析守卫 ` router.beforeResolve`
        1. 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
        2. 必须保证整个项目的守卫和异步路由组件解析完成
      3. 全局的后置守卫router.afterEach
      • 可以做一些用户友好提示
         router.afterEach( (to,from) => {
              //举例
             if( to.path === '/reg'){
             confirm('请确定要进入注册页吗?')
           }
         })
      
    • B: 路由独享守卫(在index.js的路由表中写)`beforeEnter`
      • 写在路由表中的守卫钩子
      • 针对的是和当前路由相关的,那么其他与之不相关的路由,它是无法监听它的变化情况的
         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)
           })
        
    • 组件内的后置守卫`beforeRouteLeave`
      • 当好离开组件时,调用
        – this是可以访问到

             beforeRouteLeave(to,from,next){
                 if(this.username && this.password){
                      next()
                  }else{
                      if(confirm('表单还没填完,你真的要离开吗?')){
                          next()
                       }else{
                          next(false)
                     }
                  }
             }
        
    • 组件内的更新守卫( 路由传参和路由的接参 )`beforeRouteUpdate`
      • 在当前路由改变,但是该组件被复用时调用
      • 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
      • 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      • 可以访问组件实例 this
            beforeRouteUpdate ( to,from,next ) {
                console.log('update')
                next()
            }
        }
        
  1. 功能: 导航守卫可以监听路由变化情况
  2. 名词
    • 前置: 要进入当前路由 — 老师进入教室前
    • 后置: 要离开当前路由 — 老师离开教室
  3. 关于next的使用
    • next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
    • next( false ) 表示不通过, 表示从当前路由跳转不到目标路由
    • next(‘/login’) 等价于 next({path:’/login’}) 跳转指定的路由
    • next(‘/login’) 等价于 next({path:’/login’,params,query})
    • next( fn ) 数据预载
  4. 业务: 当我们进入到一个项目的首页时,但是当我们没有注册账号时,它主动跳转到了注册/登录页
      router.beforeEach((to,from,next)=>{
          const name = localStorage.getItem('name')
          if( name || to.path === '/login' ){
            //如果有   /  -->  /home
            next()
          }else{
            next('/login')
          }
      })

  1. 业务: 当进入mine页面的时候, 要判断用户是否登录,如果没有登录,跳转登录页
    beforeEnter: (to,from,next) => {
       const name = localStorage.getItem('name')
       if( name || to.path === 'user'){
           next()
       }else{
           setTimeout( ()=> {
               alert('您还没有登录账号,3秒后自动跳转到登录页')
               next('/login')
           },3000)
       }
    }
    
  2. 路由导航守卫
  • 3种类型 7个路由监听钩子
    • 业务:
      • 监听整个项目的路由变化情况 全局的前置守卫
      • 监听某个路由的变化情况 路由的独享守卫
      • 监听的路由组件的路由变化情况 组件内的导航守卫
赞(3) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js中的路由进阶(导航守卫( 路由守卫 ))

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏