当 Vue 组件在视口中时，如何添加 body 类？答案

【问题标题】：How do I add a body class when a Vue Component is in the viewport?当 Vue 组件在视口中时，如何添加 body 类？
【发布时间】：2020-01-22 18:34:01
【问题描述】：

当用户单击路由器链接时，有没有一种方法可以添加一个类，也许是到 body 标记。然后当他们离开视图时再次删除这个类？

原因是对于应用程序外壳，我有一个固定的页眉和页脚。所有视图（Vue 组件）都将这两个元素作为设计的一部分，除了需要删除这两个元素的一页。

我想如果我可以动态添加一个 body 类，我就可以添加下面的 CSS。这个可以吗？

.minimal-shell .header,
.minimal-shell .footer{
    display:none;
}

【问题讨论】：

使用像beforeRouterEnter和beforeRouteLeave这样的钩子？

标签： javascript vue.js vuejs2

【解决方案1】：

我使用的是移动设备，因此对于格式化表示歉意。你可以只提供一个基于道具的类。

<body class="[isInView ? 'view-class' : '']">
 <Linker @click="goToView" />
</body>

型号：

data: function() {
return {
  isInView: false;
}
},
methods: {
  ... ,
 goToView() {
   this.isInView = true;
   this.$router.push({ path: 'view' });
 }
 }

【讨论】：

【解决方案2】：

如您所想，有几种方法可以满足您的要求。

1。 Vue-Router 钩子

当您导航到路由组件（您在 <router-view> 中渲染的组件）时，这些组件将具有您可以使用的特殊路由器生命周期挂钩：

beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },

更多详情请关注官方documentation

2。 Vue-Router 导航守卫

您还可以使用导航守卫 - 在路线导航期间的某个时间点调用的函数：

router.beforeEach((to, from, next) => {
  // ...
})

更多关于这个也可以在官方documentation

3。显式的、特定于组件的操作

当然，您也可以在组件本身中触发您想要的所有更改。在您导航到的组件中，或者在您的<router-view> 的根组件中。我的第一个想法是处理watcher 中的逻辑：

watch: {
  $route: {
    immediate: true, // also trigger handler on initial value
    handler(newRoute) {
      if (newRoute.params.myParam === 'my-param') {
        document.body.classList.add('my-class');
      }
    }
  }   
}

我个人会在根布局组件中查看route，因为我喜欢为业务逻辑/身份验证（而不是样式）保留导航守卫。

【讨论】：