vue 返回上一页，页面样式错乱

最新推荐文章于 2024-02-26 13:24:49 发布
最新推荐文章于 2024-02-26 13:24:49 发布
阅读量1.8k 收藏 1
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tsvico/article/details/105007359
版权

vue项目返回上一页有时候会出现，页面样式错乱，就是页面之间的样式干扰了，虽然vue 是单页面开发，但是并不是说写在哪个页面上就是哪个页面的样式
解决方法已知有如下两种

  1. 给最外层页面添加独立的div
    在这里插入图片描述
  2. 给页面样式添加scoped

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

在这里插入图片描述

参考文章: https://segmentfault.com/a/1190000015932467?utm_source=tag-newest

tsvico
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 返回上一页,页面样式错乱的解决
12-13
vue项目，返回上一个，页面样式错乱，就是页面之间的样式干扰了，虽然vue 是单页面开发，但是如果不注意样式并不是说写在哪个页面上就是哪个页面的样式，想要页面样式不冲突，一定要在最外面添加class或者id用来区分 以上这篇vue 返回上一页,页面样式错乱的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
默认浏览器设置及vue自动打开页面的方法
12-11
以下为windows 系统操作，仅供参考。 一、修改默认浏览器 个人偏好谷歌浏览器，设置谷歌浏览器为...二、vue启动自动打开页面 vue 脚手架搭建项目后启动npm run dev，会出现 Your application is running here: http://
vue页面跳转后样式变更，刷新可恢复
weixin_45915769的博客
02-13 1080
这个问题出现在A页面，多次测试之后发现，从C/D/E等页面跳转到A页面均不会出现此情况，只有从B页面跳转到A页面的时候会出现。于是乎观察了A/B页面的标签及格式。今天被师傅cue到一个小问题，说user在使用系统时有时会出现标签样式变窄，无法输入需要刷新才能恢复的情况。（可以通过查看A页面中错乱的元素 看B页面中是否也有此元素）原因：B页面中的CSS样式作用到了A页面中的对应元素。解决方式：A、B页面的CSS样式都加上。（表示仅作用于当前页面）
vue页面跳转之后，之前页面的样式错乱，刷新之后又恢复正常。解决方法
changyana的博客
10-12 5170
这是css引用错乱导致的，也就是本页面被自动使用了其它页面的css样式。为了防止这种错乱产生，需要给每个页面加上scoped，表示此css样式只在本页面进行使用。
vue3路由跳转后样式错乱（已解决）
xiezuoyuyyds的博客
02-16 596
vue3路由跳转后样式错乱（已解决）
vue 路由跳转页面样式错乱
stm870581942的博客
01-13 1236
今天发现个情况，刚进入页面时正常的，路由跳转后也是正常的，但跳转回来后页面布局乱掉了，看到的时候觉得挺好笑的，解决方法如下。 //只要在style后加上scoped就可以 <style scoped> .m { width: 1200px; margin: 0 auto; border-left: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3; display: flex; } </style> 不加sco
在Vue项目中,防止页面被缩放和放大示例
10-16
在Vue项目中，为了提供良好的用户体验，特别是在移动设备上，我们常常需要控制页面的缩放和放大行为。本文将详细讲解如何在Vue项目中防止页面被用户缩放和放大。 首先，我们需要理解`<meta>`标签中的`viewport`属性...
关于新手入坑vue，页面跳转样式错位刷新又好了的情况
Emperor灬fly的博客
09-15 1万+
       在项目开始的时候，一股脑的热情把所有的代码都码好了，然后就开始测试各模块的功能。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。于是就打开浏览器查看在页面跳转时样式的变化，我发现有些页面，在跳转时页面的样式并没有加载，而是沿用了前一个页面的，或者前面已经加载过页面的样式。一开始觉得很奇怪，后来想了想，这是个单页面应用。是不是样式的id 或者 class ...
vue页面跳转导致样式复用
weixin_30544657的博客
07-28 477
1　使用scoped <style scoped></style> 2　在最外层添加class或者id用来区分 <template> <div class="container"> </div> </template> 转载于:https://www.cnblo...
vue页面样式跳转冲突
CherryCola_zjl的博客
01-14 1312
刷新是正常，但别的页面回退或跳转，相同的class样式便会冲突。 //标签加上 scoped 会自动生成唯一标识 &lt;style lang="scss" scoped&gt; &lt;/style&gt;
VUE中页面跳转的常用方式及返回上一页实现的两种方式
热门推荐
前端-尔嵘
06-25 2万+
一、我们知道，如果是一个页面的某些部分切换变化，那不是网页之间的切换，而是子组件的切换；对于页面切换，我们需要知道的是整个页面的内容和路径都发生了改变。在原生JS中我们知道页面切换可以使用location href的方式。而在VUE中有两种常见的切换方式： 一种是router-link to="路径",问号后面是附加的传输数据，对应的页面也的按名字geohash来取。例如 <route...
vue页面跳转样式错位，刷新又好了问题解决
guairena的博客
12-15 1833
背景：   登录后，进入首页，后面点击进一个页面，这个页面下的时间线部分样式错位，通过刷新浏览器后恢复正常。 思路： 样式本身的问题，以为是定位有问题导致的，后面发现不是。 页面样式过多，导致的冲突，后面发现不是。 scoped的问题 解决办法： 通过定位样式错乱的类名，全局搜索，发现home页面也有这个类名，并且home页面的style样式下未有scoped <style lang="less" scoped></style> 这样样式就正常了 参考文章：vue，页面跳转
前端页面跳转出现闪烁，页面渲染不及时，html页面跳转或刷新时渲染出现闪屏，渲染顺序等问题的解决
qq_58805860的博客
10-07 5623
前端页面跳转出现闪烁，页面渲染不及时，html页面跳转或刷新时渲染出现闪屏，渲染顺序等问题的解决
vue 路由跳转，导致页面样式错乱，刷新又好了的情况
qq_45817647的博客
04-21 1334
vue 路由跳转，导致页面样式错乱，刷新又好了的情况 最近在进行vue开发的时候遇到了如题这样烦人又不知道怎么解决的问题：在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。 查了查网上的说法几乎都是style加scoped使其样式唯一，但我的页面导入样式写的时候就都加过scoped了，未能解决问题。绞尽脑汁，最终在室友的帮助下解决了，在此记录一下。 方案一：同各大佬说的一样，在页面style里加入scoped <style scoped> @import "hom
Vue3 router跳转到的页面样式错乱
HKing147的博客
03-08 583
Vue3 router跳转到的页面样式错乱
若依前端vue使用之经路由跳转页面，css样式不对
一起加油吧~
12-08 720
其实我也不知道算不算vue的，反正就是自己遇到过的，都简单记录一下。欢迎大家指正~
vue中用v-html根据后端返回结果设置样式
Vivien_CC的博客
12-18 1204
一、问题一、问题1=====》今日遇到一个需求，是一个表格列返回状态status，并拥有多种不同颜色。2=====》平日里见到的基本都是返回01234......前端用插槽放进去，根据数字去判断显示字段以及设置不同样式，今天看到的是后端直接返回一个字符串，像这样：3=====》因此这一次我们不再需要根据字段去判断，而是直接写样式就行。=====》于是乎，我用了v-html把它放了进去，并直接在style下面写class相应的样式。
vue项目点击跳转在点回来样式丢失，必须刷新才行，解决方案
最新发布
weixin_45847765的博客
02-26 659
网上找了很久也没发现什么办法，什么scoped也检查了没问题，后来自己仔细查看代码，给每一个box加入一个display: flex;界面就奇迹般没问题了。至于原因我发现重新点击过来时会变成一行排列，可能是某个全局样式影响了这个排布，因为用的是开源的后台框架，很多地方也不知道有什么东西，以上只是猜测，欢迎大神解读！
vue 返回上一页面
09-14
在Vue中返回上一页有多种方式，下面列举了其中几种常见的方法： 1. 使用 `router.go()` 方法：可以通过 `router.go(-1)` 来返回上一页。这个方法会在浏览器的历史记录中回退一步。 ```javascript // 在组件中调用 this.$router.go(-1); ``` 2. 使用 `router.back()` 方法：与 `router.go(-1)` 类似，也是返回上一页。 ```javascript // 在组件中调用 this.$router.back(); ``` 3. 使用 `router.push()` 方法：如果你想要通过路由跳转到上一页，可以使用 `router.push()` 方法，并指定目标页面的路径。 ```javascript // 在组件中调用 this.$router.push('/previous-page'); ``` 这里的 `/previous-page` 是你要返回的上一页的路径。 需要注意的是，以上方法都需要确保你已经正确地配置了Vue Router，并且在组件中可以访问到 `$router` 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值