javascript - 我如何让 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 函数没有触发，当我返回时，网站的其余部分仍然有溢出的主体:隐藏。我只能点击后退按钮离开页面，这不会触发 beforeLeave 功能吗？我还尝试将其更改为 beforeRouteEnter 和 beforeRouteLeave，就像它在 vue 路由器文档中所说的那样，但这不起作用，beforeLeave 也停止工作。我还尝试将 vue-router 和 vue 更新到最新版本。

Answer 1

我同意@Ohgodwhy 解决方案有效，但恕我直言，这很棘手是有充分理由的:因为你不应该这样做。用无作用域的 css 污染你的元素、开始从 js 文件添加样式规则或放弃 VUE 的 react 系统都不是一个好习惯!

相反，在您的顶级组件(可能像我们所有人一样将其称为“app”)添加以下类:

<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 类属性，否则添加 another-super-duper-class-name。因此，为了实现预期的行为，更好地分离关注点并使用 VUE 的 react 系统。