What are the ways to solve the styling and routing problem in Vue.js?

Question

Vue.js

Let's say there is a main page / and a blog /blog
, I went to the main page, styles were applied to it, here is the structure of the main template like this: App.vue

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

The problem is that if you go from the main page to the blog, then the styles will be applied there as well
. But if you update /blog, then there will be no styles anymore.
It turns out that you need to connect styles to the entire site in general? Is this one of the solutions? Or it is possible all the same to each component somehow to make?

Answer 1

scoped

Answer 2

scoped styles are not a good selector performance solution, + almost always result in noodle css.
describe styles locally using BEM or css-modules and include them in a component, get isolation and good performance.