使用“<样式范围的>"在Nuxt.js(SPA)中

问题描述

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

I start the project with nuxt.js / express.

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

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.样式范围"的正确用法是什么?

2.还是路由过程应该是< a> 而不是< nuxt-link> ?

2. Or should the routing process be <a> rather than <nuxt-link>?

推荐答案

1. 样式范围"的正确用法是什么?

< style scoped></style> 表示法并不明确，正如 scoped 属性所暗示的那样，此范围内定义的所有CSS元素仅适用于当前组件.如果CSS元素全局存在，则具有相同名称和类型的作用域优先(即，它会覆盖全局定义的CSS元素).

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.

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

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>

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

所以回答您的问题:没有正确的方法，因为只有一种方法可以做到，其含义不受任何形式的解释.

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.

1. 或者应该选择路由过程而不是?

即使将< nuxt-link/> 呈现为< a href> ，文档明确指出，必须使用前者来导航Nuxt.js应用程序，并且将来，我们将在组件，例如在后台进行预提取以提高Nuxt.js应用程序的响应速度.

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.

这篇关于使用“<样式范围的>"在Nuxt.js(SPA)中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！