Javascript 在离开前如何获取Vue路由器？

我有一个Vue组件，其中我需要body元素具有overflow:none，但其余页面应具有overflow:auto。因为主体位于组件外部，所以组件内部的作用域css不会应用于主体。我的解决方案是当他们进入页面时在路由中设置css，当他们离开页面时撤销css

{
  path: '/report',
  name: 'Report',
  component: Report,
  meta: { requiresAuth: true },
  beforeLeave: (to, from, next) => {
    console.log('before leave')
    $('body').css('overflow', 'auto');
    // next()
  },
  beforeEnter: (to, from, next) => {
    $('body').css('overflow', 'hidden');
    next()
  } 
},

---

beforeEnter函数启动，css应用于主体。但是，beforeLeave函数没有启动，当我返回时，站点的其余部分仍然具有溢出的主体：隐藏。我只能点击后退按钮离开页面，这不会触发beforeLeave功能吗？我还尝试将其更改为“beforeRouteEnter”和“beforeRouteLeave”，就像vue路由器文档中所说的那样，但这不起作用，beforeLeave也停止工作。我还尝试将vue路由器和vue更新到最新版本。

您可以在路由保留之前使用组件中的

保护：

beforeRouteLeave(to, from, next) {
  $('body').css('overflow', 'auto');

  next()
}

我同意@Ohgodwhy解决方案有效，但我有一个很好的理由认为这很棘手：因为你不应该这样做。使用未定义范围的css污染您的项目，从js文件开始添加样式规则，或者放弃VUE的反应系统，这不是一个好的做法

相反，在顶级组件（可能像我们一样称之为“应用程序”）中添加以下类：

<div
    id="app"
    :class="isReportPage ? 'super-duper-class-name' : 'another-super-duper-class-name'">
    ....
</div>

样式规则位于组件的（作用域；））css中：

VUE的神奇之处在于：每次更改路由时，由于
isReportPage
是一个计算属性，因此它将重新计算并评估当前路由的名称是否等于
Report
。如果
true
，则它将添加
超级复制器类名
类属性，否则
另一个超级复制器类名
。因此，实现所需的行为，更好地分离关注点，并使用VUE的反应系统。
在离开之前没有名为
的全局防护，但在组件中有名为
的
防护，在离开之前称为
！我没想到。如果你愿意写，我可以接受你的答案。非常感谢！我一遍又一遍地思考这个问题，除了用javascript设置它之外，我想不出其他方法。我觉得有更好的办法！
computed: {
    isReportPage() {
      return this.$route.name === 'Report';
    },
  },

.super-duper-class-name {
    overflow: hidden;
}

.another-super-duper-class-name {
    overflow: auto ;
}