Трудно изменить цвет фона в Vue js

Вместо

* {
    background: orange;
}

делать

html {
    background: orange;
}

или

body {
    background: orange;
}

Вы также можете динамически привязать класс, чтобы он применялся только к маршруту целевой страницы.

Итак, в App.vue или любом другом компоненте верхнего уровня, который действует как оболочка приложения, вы можете сделать что-то вроде этого:

/* ==== in App.vue (or Landing Page parent Component) ==== */
<template>
  <div :class = {orangeBackground: $route.path.includes('/landingPagePath')}>
     // other stuff could be here - like the router view or whatever
     <router-view> </router-view>
  </div>   
</template>
<script>
</script>
<style>
.orangeBackground {
    background: orange;
}
</style>

Основная идея заключается в том, что весь DOM содержится в родительском компоненте, но мы применяем класс .orangeBackground только в том случае, если браузер находится на маршруте целевой страницы.

HTML и body находятся вне приложения (+ Vue Router = SPA => body/html не перерисовывается при переходе от page-1 к page-2).

"проблема первая" - СПА

В компоненте с одним файлом — body, html стили применяются только при обновлении страницы (например, перейдите от page-1 к page-2 и нажмите F5):

<!-- page_2 -->
<style>
   body{
    background: orange; /* not apply if you go from page-1 to page-2 */
   }
</style>

"проблема вторая" - "выходит за рамки"

scoped == CSS будет применяться только к элементам current component. body не является частью current scoped component.

Привет мир решение

Самая основная нединамическая идея «hello world» для решения этой проблемы заключается в использовании Lifecycle-Hooks- On created изменить фон тела с помощью простого JS. На destroyed удалите фон.

<script>
export default {
  name: "orange-page",
  created: function () {
    document.body.style.backgroundColor = "orange";
  },
  destroyed: function () {
    document.body.style.backgroundColor = null;
  },
};
</script>

"мин: 100vh приложение"

Еще одна идея — добавить «обертку» + стиль min:100vh внутрь вашего #app (#app покроет весь body/html ***set: body { margin: 0;}.

Связанный пример: https://www.pluralsight.com/guides/change-page-background-color-each-route

Еще идеи:

Изменение стилей тела в vue router

css

В целом используйте:

body{
   background: orange;
}

Нет (* ==> выбирает все элементы):

С новым API композиции код выглядит так:

setup() {
  var color = "#343E3D";
  onMounted(() => {
    console.info("mounted!");
    document.body.style.backgroundColor = color;
  });
  onUnmounted(() => {
    console.info("unmounted!");
    document.body.style.backgroundColor = null;
  });
  return {};
},

Эти два хука жизненного цикла будут менять фон, когда ваш компонент загружается/выгружается. У меня была аналогичная проблема с одной страницей, которая нуждалась в другом фоне, чем остальная часть веб-сайта.