在Vue中更改页面时如何删除样式表

Posted 2023-02-22

【中文标题】在Vue中更改页面时如何删除样式表

【英文标题】：How to remove stylesheet when changing page in Vue

【发布时间】：2021-05-17 05:43:35

【问题描述】：

作为 Vue.js 的初学者，我正在尝试删除我通过 mounted 生命周期在组件中添加的样式表

 mounted() 
     this.style = document.createElement('link');
     this.style.type = "text/css";
     this.style.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css';
     document.head.append(this.style);
 

这很好用。当我访问这个页面时，我可以看到 Bootstrap 的效果。但是，当我通过router-view更改为另一个组件时，我想删除此样式表以影响其他页面。我试过remove 喜欢附加样式表，但它不起作用：

unmounted() 
    document.head.remove(this.style);

更新 似乎这在我刷新页面或使用$router.go(0) 刷新页面时有效，但是如何在不刷新页面的情况下删除样式表。

【问题讨论】：

我的第一个想法不是在运行时构建样式表链接标签，而是可能将 Vue 绑定到 head 部分的链接标签，我还没有这样做。经过短暂的搜索，我发现这个SO question 可能适用。可能您可以添加/删除 href 值。

【参考方案1】：

你可以尝试禁用它 this.style.disabled=true 并且不要在未安装的情况下执行此操作，因为很可能没有“this”，因为组件已被删除。还有一个beforeUnmount 或某事。像这样。

【参考方案2】：

htmlLinkElement 实例可以用.remove() 删除：

unmounted() 
    this.style.remove();