I'm new to Vue.js and I'm experimenting with adding and removing stylesheets in components using the mounted and unmounted lifecycles. Initially, I successfully added a stylesheet using the following code:
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);
}
Although the Bootstrap styles were applied when I load the page, I encountered an issue when I wanted to remove the stylesheet upon navigating to another component using router-view. I attempted to remove the stylesheet with the unmounted function, but it didn't work as expected:
unmounted() {
document.head.remove(this.style);
}
UPDATE
I found that the stylesheet is removed only when I refresh the page or manually trigger a page refresh using $router.go(0). Is there a way to remove the stylesheet without having to refresh the page?