在 Nuxt.js (SPA) 中使用“<stylescoped>”

Question

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

我们为 nuxt.js 中的每个组件 (.vue) 开发了样式。因此，在路由时，属性会叠加在同一个类名（样式）上，从而导致页面无法正常显示。

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

2. 或者路由过程应该是<a>而不是<nuxt-link>？

Answer 1

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

The <style scoped></style> notation is not ambiguous, as the scoped attribute suggests, all the CSS elements defined within this scope apply only to the current component. If the CSS element exists globally, the scoped one -having the same name and type- takes precedence, that is, it overrides the globally defined CSS element.

For example, let us define in /components folder 3 components Component1.vue, Component2.vue, Component3.vue:

Component1.vue:

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

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

Component2.vue:

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

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

Component3.vue:

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

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

• In Component1.vue, the text will be displayed in yellow.
• In Component2.vue, the text will be displayed in red because the scoped CSS class takes precedence over the globally defined one in Component1.vue.
• In Component3.vue, the text will be displayed in yellow.

So to respond to your question: there is no correct way because there is only one way to do that, and the meaning is not subject to any form of interpretation.

2. Or should the routing process be rather than ?

Even if <nuxt-link /> is rendered as <a href>, the documentation clearly states the former must be used to navigated through the Nuxt.js application and In the future, we will add features to the component, like pre-fetching on the background for improving the responsiveness of Nuxt.js Applications.