页面跳转时自定义CSS不生效，仅刷新页面后样式才正常展示

问题原因 #

• 单页应用样式作用域冲突：当前项目为Vue+Vuetify开发的单页应用，若#progress-bar的样式定义在带scoped属性的<style>标签内，路由跳转组件动态挂载时，自定义样式加载顺序晚于Vuetify自带v-col组件的内置样式，scoped样式的优先级计算逻辑会导致自定义ID样式被默认样式覆盖；手动刷新页面后所有样式统一加载排序，优先级回归正常，样式即可正常展示。
• 元素挂载时序不匹配：路由跳转时v-col元素优先挂载渲染，自定义样式还未完成注入，首次渲染未匹配到对应规则，刷新后样式、元素同步加载，渲染正常。
• CSS优先级不足：你当前写的ID选择器优先级和Vuetify的v-col默认样式优先级持平，路由跳转时默认样式后加载覆盖自定义样式，刷新时自定义样式后加载则正常生效。

解决方案 #

• 方案1：直接提高自定义样式优先级，给样式规则添加*!important*关键字，修改后代码如下：

#progress-bar{
    position: absolute !important;
    top:12% !important;
    right:50% !important;
    transform: translate(50%) !important;
    font-size: 25px !important;
}

• 方案2：调整样式作用域，将这段CSS从带scoped的组件样式中移除，放到项目全局样式文件（如global.css、common.css）内，全局样式优先级高于组件局部样式，路由跳转时也可正常匹配。
• 方案3：不改动作用域也不用*!important*的前提下，给#progress-bar的父元素添加自定义类名，用「父类名+ID」的组合选择器提高优先级，示例代码如下：

.custom-parent #progress-bar{
    position: absolute;
    top:12%;
    right:50%;
    transform: translate(50%);
    font-size: 25px;
}

• 方案4：强制组件重新渲染，给包含progress-bar的页面组件绑定动态路由key，路由跳转时key变化会触发组件销毁重建，保证样式和元素同步加载，示例如下：

<template>
  <your-page-component :key="$route.fullPath">
    <!-- 页面原有内容 -->
  </your-page-component>
</template>

内容的提问来源于stack exchange，提问作者Lorine