Как мне получить Vue Router до того, как уйти в огонь? - PullRequest
Новая
       6

Как мне получить Vue Router до того, как уйти в огонь?

0 голосов
/ 19 декабря 2018

У меня есть компонент Vue, в котором мне нужно, чтобы элемент body имел переполнение: нет, но остальные страницы должны иметь переполнение: auto.Поскольку тело расположено за пределами компонента, область CSS cssoped внутри компонента не применяется к телу.Моим решением было установить 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 до последних версий.

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Я согласен @ 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.

0 голосов
/ 19 декабря 2018

Вы можете использовать beforeRouteLeave охранник, который является in-component только: 

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

  next()
}
...