css - 如何动态加载css文件

Question

我们正在为我的应用程序使用 Vue.js 和 Vuetify。作为我的应用程序的一部分，我将根据该 API 响应在页面加载时进行 API 调用，整个应用程序将呈现所有组件。作为此 API 的一部分，我将获得名为 cssDirection 的属性，它会告诉应该加载哪个 css 文件，它是 LTR 还是 RTL。

当我在 Angular 工作时，我们使用了 this方法。

现在我的问题是，是否有任何解决方法可以在 Vue 中实现此目的而不是上述方法？我用谷歌搜索我没有找到任何解决方案。

谢谢

Answer 1

要动态加载 css 文件，你可以这样做

<template>
  <div>
    <button @click="appendFile">Click me to add css file</button>
  </div>
</template>

<script>
export default {
  methods : {
    appendFile(){
      let file = document.createElement('link');
      file.rel = 'stylesheet';
      file.href = 'myfile.css'
      document.head.appendChild(file)
    }
  }
}
</script>