Question

我有一个Vue组件，在其中我需要body元素具有溢出：无，但其余页面应该具有溢出：自动。由于主体位于组件外部，因此组件内部的作用域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功能吗？我还尝试像vue路由器文档中所说的那样将其更改为beforeRouteEnter和beforeRouteLeave，但这不起作用，并且beforeLeave也停止工作。我还尝试将vue-router和vue更新到最新版本。

Answer 1

我同意@Ohgodwhy解决方案有效，但是恕我直言，这有一个很好的理由，这很棘手：因为您不应该这样做。最好不要使用无作用域的CSS污染您的项目，开始从js文件中添加样式规则或放弃VUE的反应性系统！

相反，在您的顶级组件（就像我们所有人一样，可能将其称为“ 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的反应系统。

Answer 2

您可以使用仅beforeRouteLeave的{{1}}防护：

in-component

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

2 个答案: