vue css样式需要刷新才能加载出来

html-css017

vue css样式需要刷新才能加载出来,第1张

最近发现一个比较奇怪的问题，就是在开发vue中，路由点击跳转到另外一个组件中，样式是不出来的，然后刷新当前页面css样式才加载出来，找了好久才发现这个bug。

进入以后样式是这样的：css样式根本没有加载，这是为什么？

刷新了页面以后才可以出来，本身样式也是这样的：

找了半天原因，一点一点测试才发现

原来渲染的组件的父盒子的class='item'居然影响了css样式的内容，很奇怪，把class='item'修改成比如：class='abc'就可以了。

原文地址和更多信息：

https://www.3mooc.com/front/articleinfo/465

首先准备两个样式表：1.css 2.css （先用这个吧）

然后在<head>标签里加入一下代码：

<head>

<script type="text/javascript">

var cssname=Math.floor(Math.random()*2+1)

document.write("<link rel='stylesheet' type='text/css' href='"+cssname+"'.css/>")

</script>

……

</head>

注释：用的是随机输出1~2之间的整数来作为CSS的文件名，所以CSS的文件名必须和它对应。呵呵 有一个缺点就是不能保证每次刷新时都会调用新的CSS。希望高手来搭把手！

看看对你有没有帮助

=======================

如果用这个代码，那css文件名就必须至少含有1或者2。如果你想要按照自己的方式命名，那就用数组吧。其实也就是调用arr[0]、arr[1]、arr[2]这种模式。个人感觉没什么必要，以后维护也没什么繁琐的。