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

问题描述

Vue.js

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

• 进一步的开关保持相同的背景(同样，相关组件的其他元素被正确渲染).Chrome Dev Tools 没有变化(上面的最后一个视图没有变化)

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

解决方案

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

托尔斯滕·伦堡:

<块引用>

是的，这是意料之中的.Vue(或者更确切地说，webpack)不会插入和删除这些样式，就像您认为的那样.它们被注入一旦组件呈现，就永远不会被移除.

一种常见的模式是将所有 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

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