基于路由完全分离样式 - Vue

Question

我目前正在为所有路由使用main.js 中的 UI 库，但我希望某些路由与 UI 库完全隔离并具有自定义样式。我如何做到这一点？

• 使用<style scoped> 不起作用，因为我需要使用body 标记。
• 使用 <style> 不起作用，因为如果我访问自定义样式路由并返回到正常路由，自定义样式路由中的样式会继承

Answer 1

您可以使用<style scoped>，对于组件范围之外的任何内容，请使用 JS。

例如，如果您只希望 body 具有特定路线的特定样式，您可以在 created 挂钩中添加样式并在 beforeDestroy 挂钩中删除它们：

created() {
    document.getElementsByTagName("body")[0].style.padding = "20rem";
},
beforeDestroy() {
    document.getElementsByTagName("body")[0].style.padding = "0rem";
}

您甚至可以创建一个完整的样式表并将其附加到head：

created() {
    const style = document.createElement("style");
    style.setAttribute("rel", "stylesheet");
    style.setAttribute("type", "text/css");
    style.innerHTML = "body { padding: 20rem }";
    document.getElementsByTagName("head")[0].appendChild(style);
},
beforeDestroy() {
    const head = document.getElementsByTagName("head")[0];
    head.removeChild(head.children[head.childElementCount - 1]);
}

请确保在从路线导航时正确清理，因为例如，如果head.children[head.childElementCount - 1] 没有返回您附加的样式表，您最终可能会留下样式表。