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

Question

作为 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) 刷新它时，这似乎有效，但如何在不刷新页面的情况下删除样式表。

Answer 1

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

Answer 2

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

unmounted() {
    this.style.remove();
}