切换路由时仅应用一次组件中的非范围样式
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 previousstyle
- 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
相关文章