Question

我在一个Vue.js project中拥有我的管理面板和客户页面。仅当当前路由具有css-files元时才可以使用某些"forAdmin"吗？

Answer 1

要在css中包含components文件，可以使用以下命令-现在在JS部分中，您可以使用if进行验证并添加文件

https://codesandbox.io/s/vue-template-fedn4

<script>

require('./assets/css/main.css')

</script>

Answer 2

在您的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 3

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

首先，您需要更新Webpack配置规则，以便使用 useable 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()调用的总数，因为在后台会保留一个引用计数，以便确定何时应应用样式表。

我不确定您的设置是什么，因此可能会有更好的方法来做您想要的事情。

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

3 个答案: