Nuxt SSR中组件内router.push跳转后目标页面CSS未生效

• 样式未做隔离导致的全局样式残留
  你在index.vue和jobs.vue中定义的<style>标签均未添加scoped作用域属性，所有样式都会被打包为全局CSS规则。Nuxt构建时会把每个页面组件的CSS拆分为独立chunk，框架仅对添加了scoped的样式做路由切换时的DOM清理，无scoped的全局样式一旦注入到<head>中，哪怕对应组件被卸载，也不会在客户端路由跳转时自动从样式表移除。哪怕你采用SSR而非纯SPA模式，客户端路由切换时还是会复用已有的页面壳DOM，不会整页重载，这就给旧样式残留提供了条件。
• 与第三方UI库的默认类名冲突
  你在index.vue中定义了全局.container规则，附带display: flex; justify-content: center等样式。而BootstrapVue的<b-container>组件默认渲染的DOM节点自带.container类，不管你额外加了什么类名（比如你给jobs页容器加的main_container），默认的container类都会存在——这就导致首页残留的全局.container样式，直接命中了jobs页里的b-container元素，出现样式错乱。
• 硬刷新后样式正常的逻辑
  手动刷新jobs页时，整个DOM结构会被重建，Nuxt的SSR逻辑只会根据当前路由请求，注入对应jobs页面的CSS资源，不会把之前首页的CSS残留带进来，没有旧样式干扰，自然就恢复正常了。

• 给所有页面、组件的<style>标签添加scoped属性做样式隔离，这样组件卸载时绑定的作用域样式会自动从DOM中移除，不会出现跨页面的样式残留。如果需要覆盖BootstrapVue组件的内部样式，使用Vue提供的深度选择器（比如:deep()）穿透作用域限制。
• 避免跟第三方UI库的默认类名重名，把首页原来的.container类改成专属命名，比如home-search-wrapper，从根源上避免类名命中冲突。
• 如果必须使用全局样式，给不同页面的CSS加上专属命名空间前缀，避免跨页面的样式污染。

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