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

Non-scoped styling in components applied only once when switching routes(切换路由时仅应用一次组件中的非范围样式)

问题描述

Vue.js

• 当切换路由并加载第二个组件时，背景会更改为新颜色，从 Chrome 开发工具中看起来 background-color 的当前样式已被覆盖.所有其他组件元素均已正确呈现(内容和范围样式)

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

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

我打开了一个错误报告 为此，它最终成为预期的行为.报告评论摘要:

Thorsten Lünborg:

<块引用>

是的，这是意料之中的.Vue(或者更确切地说，webpack)不插入和如您所想，删除这些样式.它们被注入head 一旦组件渲染，就永远不会被移除.

一种常见的模式是将所有 CSS 提取到一个 .css 文件中生产，这将具有相同的结果.

我在问题背景下的总结:

• 最初(没有路由，没有渲染组件)没有注入任何东西
• 第一个组件在路由切换时渲染，其style被注入
• 第二个组件在路由切换时渲染，它的style被注入并覆盖之前的style
• 进一步的路由切换不会注入任何东西，因为每个组件都已经渲染过一次.因此，最后使用的 style 仍然是权威的.

因此，我将退回到将 body 类绑定到当前组件的 data

Vue.js documentation for Scoped CSS mentions that

You can include both scoped and non-scoped styles in the same component

I built the example application for vue-router and used two single file components instead of the string templates of the example - the rendering is as expected.

I then tried to apply both scoped and non-scoped styles in the components. In the first one I have

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

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

and the second one

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

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

The idea is to have the whole body background switch when choosing a specific route.

The scoped styles are OK - they change depending on the route.

The non-scoped ones do not (screenshots are from Chrome Dev Tools):

• on initial application load (non routed yet) the background is white (which is OK - this is the default one and there is no route for /).
• when choosing a route, the style for the body is applied correctly (say, green from the first component)

• when switching routes and loading the second component the background changes to the new color, it looks like from Chrome Dev Tools that the current style for background-color is overwritten. All the other components elements are correctly rendered (content and scoped styling)

• further switches keep the same background (and again, other elements of the relevant component are rendered correctly). There are no changes in Chrome Dev Tools (the last view above is unchanged)

In other words, it looks like the style is stacked and previously overwritten properties are not updated Is this expected behaviour?

I opened a bug report for this and it ended up being expected behaviour. The summary from the report comments:

Thorsten Lünborg:

Yes, this is expected. Vue (or rather, webpack) does not insert and remove these styles, as you seem to think. They are injected into the head once the component renders, and never removed.

A common pattern is to extarct all CSS into a single .css file in production, which would have the same result.

My summary in the context of the question:

• initially (no route, no component rendered) nothing was injected
• the first component is rendered on route switch, its style is injected
• the second component is rendered on route switch, its style is injected and overwrites the previous style
• further route switches do not inject anything as each component was already rendered once. The last style used therefore stays as the authoritative one.

I will therefore fallback on binding the body class to the current component's data

这篇关于切换路由时仅应用一次组件中的非范围样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！