Question

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

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

我认为，如果可以动态添加body类，则可以添加以下CSS。能做到吗？

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

Answer 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' });
 }
 }

Answer 2

您可以想象有几种方法可以完成您要问的事情。

1。 Vue-路由器挂钩

当您导航以路由组件（在<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，因为我希望为业务逻辑/身份验证（而非样式）保留导航保护。

当Vue组件在视口中时，如何添加主体类？

2 个答案:

1。 Vue-路由器挂钩

2。 Vue-Router导航卫士

3。明确的，针对特定组件的操作