时间戳

首页 > 解决方案 > 如何让 Vue Router beforeLeave 触发？

javascript - 如何让 Vue Router beforeLeave 触发？

问题描述

我有一个 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 功能吗？我还尝试将其更改为 beforeRouteEnter 和 beforeRouteLeave 就像它在 vue 路由器文档中所说的那样，但这不起作用，并且 beforeLeave 也停止工作。我还尝试将 vue-router 和 vue 更新到最新版本。

标签： javascriptcssvue.jsvue-router

解决方案

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

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

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

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

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

并且样式规则规则在您的组件的（作用域；））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 的反应性系统。

推荐阅读