关于vue router能力的使用技巧总结

关于vue router能力的使用技巧总结

---

 

• 本内内容：
  
  • 　　1：app端路由切换抖动配置
  • 　　2：使用navigation
  • 　　3：路由缓存规则
  • 　　4：路由动画切换

---

 

• app端路由抖动配置
  • 　　app端使用vue 路由时会出现动画渲染的闪动问题

  • .router {
    position: absolute;
    width: 100%;
    transition: all 0.377s ease;
    backface-visibility: hidden;　　//元素不面向屏幕时是否可见
    }

---

 

• 使用navigation以及子路由配置
  
  • 　　在app中识别路由动作规则是必要的，https://github.com/zack24q/vue-navigation

  • <navigation>
    　　<router-view />
    </navigation>

---

 

• 路由缓存规则
  
  • 　　使用navigation的路由规则
  • 　　后退时保留路由缓存内容，前进时，进行数据获取
  • 　　注意关于路由前进后退的规则不同history(-1)

 

---

 

• 路由动画切换
  • 　　使用meta配置页面动画

  • meta: {
    transitionName: 'fade'
    }

    或

    meta: {
    transitionEnterName: 'fade',
    transitionBackName: 'fade'
    
    }

  • 　　路由动作绑定规则

  • this.$navigation.on('forward', (to, from) => {
     if(to.route.meta.transitionName != undefined){
      this.transitionName = to.route.meta.transitionName
     }else{
      this.transitionName = 'default'
     }
    })
    this.$navigation.on('back', (to, from) => {
     if(from.route.meta.transitionName != undefined){
      this.transitionName = from.route.meta.transitionName
     }else{
      this.transitionName = 'default'
     }
    })

 

---

 

• 感谢您的阅读，如果有误，或者其他问题，请回复