是否可以在 Vue.js 中有条件地导入 css 文件？

Question

我的管理面板和客户页面合二为一Vue.js project。css-files仅当当前路线有"forAdmin"元时才可以使用确定吗？

Answer 1

在您的mounted()函数中，您可以像这样添加它。

if(someCondition) {
    var element = document.createElement("link");
    element.setAttribute("rel", "stylesheet");
    element.setAttribute("type", "text/css");
    element.setAttribute("href", "external.css");
    document.getElementsByTagName("head")[0].appendChild(element);
}

Answer 2

通过使用style-loader可用的API，您可以在代码中动态应用和删除样式表。

首先，您需要更新您的 webpack 配置规则，以便使用可用的API加载.useable.css带有扩展名的样式表：

{
  test: /\.css$/,
  exclude: /\.useable.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
},
{
  test: /\.useable\.css$/,
  use: [
    'style-loader/useable',
    'css-loader'
  ]
}

现在，在您的路由器代码文件中，您可以根据您的情况导入样式表和.use()它：.unuse()

import style from './admin.useable.css'

const router = new VueRouter(...)

router.afterEach((to, from) => {
  for (const route of to.matched) {
    if (route.meta.forAdmin) {
      style.use()
    }
  }

  for (const route of from.matched) {
    if (route.meta.forAdmin) {
      style.unuse()
    }
  }
})

.use()确保正确平衡和调用的总数.unuse()，因为在幕后维护引用计数以确定何时应应用样式表。

我不确定你的设置是什么，所以可能有更好的方法来做你想做的事。