组件中的非范围样式仅在切换路径时应用一次

Question

Vue.js documentation for Scoped CSS提及

  

您可以在同一个组件中包含范围和非范围样式

我构建了example application for vue-router并使用了两个单个文件组件而不是示例的字符串模板 - 渲染是按预期进行的。

然后我尝试在组件中应用范围和非范围样式。在第一个我有

<style scoped>
div {
    color: white;
    background-color: blue;
}
</style>

<style>
body {
    background-color: green;
}
</style>

和第二个

<style scoped>
div {
    color: white;
    background-color: red;
}
</style>

<style>
body {
    background-color: yellow;
}
</style>

我们的想法是在选择特定路线时切换全身背景。

scoped样式没问题 - 它们会根据路线而改变。

非范围的那些（截图来自Chrome Dev Tools）：

• 初始应用程序加载（尚未路由）背景为白色（可以 - 这是默认值，没有/的路径。）
• 选择路线时，正确应用了正文的样式（例如，来自第一个组件的green）

• 当切换路线并加载第二个组件时，背景变为新颜色，从Chrome开发工具看起来，background-color的当前样式被覆盖。所有其他组件元素都已正确呈现（内容和范围样式）

• 其他开关保持相同的背景（同样，相关组件的其他元素也正确呈现）。 Chrome开发者工具没有变化（上面的最后一个视图没有变化）

换句话说，看起来风格是堆叠的，之前覆盖的属性没有更新这是预期的行为吗？

Answer 1

我为此打开了一个bug report，结果是预期的行为。报告摘要评论：

Thorsten Lünborg：

  

是的，这是预料之中的。 Vue（或更确切地说，webpack）不插入和   正如您所想的那样，删除这些样式。他们注入了   一旦组件渲染，就会移动头部，并且永远不会移除。

     

一种常见的模式是将所有CSS转义为单个.css文件   生产，这将产生相同的结果。

我在问题的背景下的总结：

• 最初（没有路线，没有渲染任何组件）没有注入任何东西
• 第一个组件在路由交换机上呈现，其style被注入
• 第二个组件在路由交换机上呈现，注入style并覆盖之前的style
• 进一步的路由开关不会注入任何东西，因为每个组件已经渲染一次。因此，最后使用的style仍然是权威的。{/ li>

因此，我会依靠将body类绑定到当前组件的data