问题
I start the project with nuxt.js / express.
We have developed style scoped for each component (.vue) in nuxt.js. So, when routing , the property is overlaid on the same class name (style), so the page does not display properly.
1. What is the correct use of 'style scoped'?
2. Or should the routing process be <a> rather than <nuxt-link>?
回答1:
- What is the correct use of 'style scoped'?
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.
- 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.
来源：https://stackoverflow.com/questions/44592158/use-of-style-scoped-in-nuxt-js-spa