Какие способы решения проблемы со стилями и роутингом в Vue.js?

Question

[Denoro55]

Допустим есть главная страница / и блог /blog
я зашел на главную, применились стили к ней, вот структура шаблона главной примерно такая: App.vue

<template><template>
<script><script>
<style>
body: text-align: center;
<style>

Проблема в том, что если перейти с главной на blog, то стили и там применятся
Но если обновить /blog то стилей не будет уже.
Получается нужно подключать стили ко всему сайту в общем? Это одно из решений? Или можно все таки к каждому компоненту как то сделать ?

Answer 1

[0xD34F]

scoped

Answer 2

[in some]

scoped стили не очень хорошее решение по производительности селекторов, + почти всегда приводят к лапшевидному css.

описывайте стили локально используя БЭМ, либо css-modules и подключайте в компоненте, получите изоляцию и хорошую производительность.