我如何让 Vue Router beforeLeave 开火？

Question

我有一个 Vue 组件，我需要 body 元素有 overflow:none，但其余页面应该有 overflow:auto。因为正文位于组件外部，所以组件内部的作用域 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 函数没有触发，当我返回时，网站的其余部分仍然有带有 overflow:hidden 的正文。我只能点击后退按钮离开页面，这不会触发 beforeLeave 功能吗？我还尝试将其更改为 beforeRouteEnter 和 beforeRouteLeave，就像它在 vue 路由器文档中所说的那样，但这不起作用，beforeLeave 也停止工作。我还尝试将 vue-router 和 vue 更新到最新版本。

Answer 1

您只能使用 in-component 的 beforeRouteLeave 守卫：

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

  next()
}

Answer 2

我同意@Ohgodwhy 解决方案有效，但恕我直言，这很棘手是有充分理由的：因为你不应该这样做。用未限定范围的 css 污染您的项目、开始从 js 文件添加样式规则或放弃 VUE 的反应系统都不是一个好习惯！

相反，在您的顶级组件（可能像我们所有人一样将其称为 'app'）添加以下内容 class:

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

其中 isReportPage 是在检查当前路由名称的顶级组件脚本中计算的属性：

computed: {
    isReportPage() {
      return this.$route.name === 'Report';
    },
  },

并且样式规则规则在您组件的 (scoped ;) ) css:

中

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

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

现在这是 VUE 的魔力：每次您更改路线时，由于 isReportPage 是计算的属性，它将重新计算并评估当前路线的名称是否等于 Report。如果 true，那么它将添加 super-duper-class-name class 属性，否则 another-super-duper-class-name。因此，为了实现预期的行为，更好地分离关注点并使用 VUE 的反应系统。

我如何让 Vue Router beforeLeave 开火？

How do I get Vue Router beforeLeave to fire?

javascript

css

vue.js

vue-router