Css 使用'&书信电报；样式范围>'；在Nuxt.js中（SPA）

我使用nuxt.js/express启动项目

我们已经为nuxt.js中的每个组件（.vue）开发了样式范围。因此，在路由时，属性覆盖在相同的类名（样式）上，因此页面无法正确显示

1。“样式范围”的正确用法是什么？

2。或者路由过程应该是

而不是

？

“样式范围”的正确用法是什么

符号并不含糊，正如

scoped

属性所表明的，在此范围内定义的所有CSS元素仅适用于当前组件。如果CSS元素全局存在，则具有相同名称和类型的作用域元素优先，也就是说，它覆盖全局定义的CSS元素

例如，让我们在/components文件夹中定义3个组件Component1.vue、Component2.vue、Component3.vue：

组件1.vue：

<template>                                                                                                                                             
  <div class="yellow-text">Component 1</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component1'                                                                                                                                   
}                                                                                                                                                      
</script>  
<style>
.yellow-text {
  color: yellow;
}
</style>   

组成部分1
导出默认值{
名称：“组件1”
}                                                                                                                                                      
.黄色文本{
颜色：黄色；
}

组件2.vue:

<template>                                                                                                                                             
  <div class="yellow-text">Component 2</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component2'                                                                                                                                   
}                                                                                                                                                      
</script>  
<style scoped>
.yellow-text {
  color: red;
}
</style>             

<template>                                                                                                                                             
  <div class="yellow-text">Component 3</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component3'                                                                                                                                   
}                                                                                                                                                      
</script>  

构成部分2
导出默认值{
名称：“组件2”
}                                                                                                                                                      
.黄色文本{
颜色：红色；
}

组件3.vue:

<template>                                                                                                                                             
  <div class="yellow-text">Component 2</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component2'                                                                                                                                   
}                                                                                                                                                      
</script>  
<style scoped>
.yellow-text {
  color: red;
}
</style>             

<template>                                                                                                                                             
  <div class="yellow-text">Component 3</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component3'                                                                                                                                   
}                                                                                                                                                      
</script>  

构成部分3
导出默认值{
名称：“组件3”
}                                                                                                                                                      

• 在Component1.vue中，文本将显示为黄色
• 在Component2.vue中，文本将显示为红色，因为作用域CSS类优先于Component1.vue中全局定义的CSS类
• 在Component3.vue中，文本将显示为黄色

因此，回答你的问题：没有正确的方法，因为只有一种方法可以做到这一点，而意义不受任何形式的解释

或者路由过程应该是而不是

即使将

呈现为

明确指出，必须使用前者浏览Nuxt.js应用程序，并且在将来，我们将向组件添加功能，例如在后台预取，以提高Nuxt.js应用程序的响应能力