Как добавить класс тела, когда компонент Vue находится в области просмотра? - PullRequest
Новая
       0

Как добавить класс тела, когда компонент Vue находится в области просмотра?

0 голосов
/ 22 сентября 2019

Есть ли способ, которым я могу добавить класс, возможно, к тегу body, когда пользователь нажимает на ссылку роутера.Затем удалить этот класс снова, когда они покидают вид?

Причина в том, что для оболочки приложения у меня есть фиксированный верхний и нижний колонтитулы.Все представления (Vue Components) содержат эти два элемента как часть дизайна, за исключением одной страницы, где эти два элемента необходимо удалить.

Я подумал, что, если бы я мог добавить класс тела динамически, я мог бы затем добавитьниже CSS.Можно ли это сделать? 

.minimal-shell .header,
.minimal-shell .footer{
    display:none;
}

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

Есть несколько способов сделать то, что вы просите, как вы можете себе представить.

1.Крюки Vue-Router

Когда вы переходите к компонентам маршрута (компоненты, которые вы визуализируете внутри <router-view>), эти компоненты будут иметь специальные крюки жизненного цикла маршрутизатора, которые вы можете использовать: 

beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },

Подробнее об этомв официальной документации

2.Навигационная защита Vue-Router

Вы также можете использовать навигационную охрану - функция, которая вызывается в определенной точке во время навигации по маршруту: 

router.beforeEach((to, from, next) => {
  // ...
})

Подробнее об этом также в официальном документация

3.Явное, специфичное для компонента действие

Конечно, вы также можете инициировать все необходимые изменения в самих компонентах.Либо в компонентах, к которым вы переходите, либо в корневой компонент вашего <router-view>.Моя первая идея состояла бы в том, чтобы обработать логику в watcher: 

watch: {
  $route: {
    immediate: true, // also trigger handler on initial value
    handler(newRoute) {
      if (newRoute.params.myParam === 'my-param') {
        document.body.classList.add('my-class');
      }
    }
  }   
}

Я лично наблюдал бы route в корневом макете-компоненте, так как я хотел бы сохранить навигационную охрану для бизнес-логики / аутентификации(не стиль).

0 голосов
/ 22 сентября 2019

Я на мобильном телефоне, поэтому прошу прощения за форматирование.Вы можете просто предоставить класс на основе реквизита.

<body class="[isInView ? 'view-class' : '']">
 <Linker @click="goToView" />
</body>

Модель: 

data: function() {
return {
  isInView: false;
}
},
methods: {
  ... ,
 goToView() {
   this.isInView = true;
   this.$router.push({ path: 'view' });
 }
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...