如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换

大佬教程收集整理的这篇文章主要介绍了如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换？

开发过程中遇到如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换的解决方法建议，希望对你解决如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换有所启发或帮助；

遇到一个简单的问题。

我有一个 nuxt 布局文件，它有一个侧边栏，需要通过单击按钮来隐藏。

按钮和一切正常，但每次页面加载时它都会转换。

这是有问题的代码： 来自模板和样式部分：

<Transition name="sIDebar">
    <SIDebar v-show="showSIDebar"/>                       
</Transition>

.sIDebar-leave-active,.sIDebar-enter-active {
  Transition: .3s;
}
.sIDebar-enter {
  transform: translate(-100%,0);
}
.sIDebar-leave-to {
  transform: translate(-100%,0);
}
@H_404_11@ 
解决方法
最终向转换添加了一个 javascript before-enter 钩子，用于在允许转换之前检查正在运行的挂载钩子。
<transition v-on:before-enter="beforeEnter" :name="(allowTransition) ? 'sidebar' : ''">
    <Sidebar v-show="showSidebar"/>                       
</transition>

data() {
    return {
      showSidebar: true,isMounted: false,allowTransition: false    
    }    
  },methods : {
    beforeEnter(){      
      this.allowTransition = (this.isMounted) ? this.isMounted : !this.isMounted;
    }
  },mounted(){
    this.isMounted = true;
  }
 


 
 
      

大佬总结

以上是大佬教程为你收集整理的如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换全部内容，希望文章能够帮你解决如何在 NuxtJS 应用程序中防止页面加载时 Vuejs 转换所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。