vue 路由回退问题

Question

贴图一看就知道问题

这是开始，点击 login 去到登录页

也就是这个页面，随后点击浏览器的回退按钮回到开始页面

login 中的样式就影响到了开始页面，这个怎么解决？

Answer 1

情况可能
1：你的背景色 给的是最外层的盒子 index.html页面的DIV
2：你的css类名冲突 或者没起名字 直接利用标签
3：浏览器问题

如果是1 你应该再对应的路由组件里面写样式

 2 在组件css里面写入

 作用就是css不影响其他组件  及时有冲突命名
 3换Vue支持的浏览器
 

Answer 2

style 加个scoped， 使用less或scss 用顶层类名包裹着。

Answer 3

如果 <style> 标签中 不写scoped 那么你写的class 样式就会被重复引用， 因为变成全局样式了
比如： 1.vue 中有 <div class='login'></div> .login{ color:red }

1. <input class="login" />.login{ color:blue}

那么这个一定不会是写的样式， 要吗全红， 要吗全蓝。 必须加scoped 做限制。

或者你直接用行内样式写

Answer 4

原因猜测：background-image 优先级高于 background-color，
这意味着同时设置 background-image 和 background-color，
background-color 被覆盖。
解决方法很简单，设置 background-image:none;