VUE页面路由跳转后，出现样式混乱，刷新后恢复正常的3个解决方法

状况演示

点击跳转

到达目标页面发现页面混乱

刷新即可恢复样式

问题原因：

通常是vue加载页面组件时，会把所有的组件样式加载在一起，而碰巧在下一个页面中也有同样的组件但是样式不同，例如使用的常用组件库element-UI时可能会发生这种情况，通常有如下解决方法

方法1：

通过vue框架去为style标签设定scoped属性， scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，scoped将这个样式局限在当前框架（在样式生成时为其分配一个独一无二的属性，比如 data-v-21e5b78 为组件内 CSS 指定作用域，也就是给你定义的名字前加一串哈希值。）

方法2：

不导入CSS文件，直接在style里面编写CSS，使得CSS样式不会总体共享

方法3（建议前面两个都失效使用）：

不使用路由跳转，直接使用window.open("/xxx"); 打开新页面即可自动刷新