解决Vue中搜索组件和其他组件之间的一个刷新的问题

最新推荐文章于 2023-05-06 15:04:15 发布
最新推荐文章于 2023-05-06 15:04:15 发布
阅读量299 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53861597/article/details/127839072
版权
本文探讨了在Vue应用中，当搜索功能导致浏览器地址栏变化但内容未实时更新的问题。原因是Vue无法检测深层次的数据变化。解决方案是通过watch监听$route，并在数据更新后重新调用请求方法以强制页面刷新。这种方法虽非最优，但在当前情况下有效。
摘要由CSDN通过智能技术生成

当我们点击search中的搜索功能是会引起浏览器栏的变化，如图

变化前 ：

变化后：

但是由于搜索是被单独封装到另一个组件，因此在显示内容是无法实时刷新

如图

  可以看出浏览器地址栏发生变化，但是内容好像什么都没有发生改变。

内容部分代码如图

从代码中可以看出，我们的部分数据是从浏览器地址栏中获取，但由于地址栏的变化不会引起vue中数据的变化，因此当我们点击搜索时就会出现浏览器地址栏变了但页面没有刷新。解决这个问题的方式之一可以通过watch监视属性去监视地址栏的变化，也就是监视$route，然后再在这边进行一个数据的更新，但这边又有一个问题，虽然我们数据是更新了但依旧不会引起页面的刷新，原因是因为vue2中data中的数据默认只能检测到浅层次的数据变化，但稍微深一点就检测不到，检测不到就不会引起页面的刷新，我选择的解决方式是在watch监听中我们在数据更新好了之后可以重新掉一次请求方法。如图所示

这样子我们就可以解决页面不刷新的问题了

这种解决办法可能不是很好，但目前我只能想到这种，如有不足，还请多多包涵

weixin_53861597
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue实现组件的局部刷新
qq_30108237的博客
05-28 1499
Vue实现组件的局部刷新通过v-if Vue中我们不可避免的需要调用来自各个方面的组件：奇奇怪怪的组件增加了！ 这个时候有个问题：我从后端传来的数据给组件渲染，然而组件却没有更新！ 恼火，难道我只能刷新网页才能更新数据吗！搭嘎抠图哇路（但是我拒绝！）！ 通过v-if 在组件中添加v-if v-if="reFresh" <script> export default { data(){ return{ reFresh:true } }, methods: { R
解决vue router组件状态刷新消失的问题
10-18
在开发Vue.js应用程序时，使用Vue Router构建的单页应用常常遇到一个问题，即在用户登录后，状态信息（如用户信息）在页面刷新后消失。这是因为Vue Router的路由切换并不持久化存储数据，一旦页面刷新，之前的状态...
vue的页面刷新和单独组件的销毁重建
浩星
08-22 7707
首先：vue的全局页面刷新方法，原理都是一样，用v-if控制组件的状态，然后在销毁重建 //1、在app.vue中定义方法： <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view>//1、加v-if,控制整个app页面 </div&...
关于vue组件的刷新问题
Shuang_gege的博客
05-18 6598
最近在项目中偶然碰到了一个问题，同一个页面组件，在不同的操作中进行展示，突然发现，页面的数据没有变化，意思就是我的组件没有进行数据刷新。经过各种尝试，终于解决，现将方法共享出来： vue本来就是一个数据双向绑定的框架，而页面在初始化完成渲染过后，如果没有命令介入，有时候及时数据有变化也不会触发页面的重新渲染。当我们在调用同一个组件的时候，如果调用的数据是通过同一个字段或者属性获取而来并且这个字段或者属性没有发生变化的时候，组件自身是监控不到数据的实际变化的。这个时候就...
vue 组件不刷新解决办法
chenfairy的博客
09-07 1622
vue 解决组件不刷新问题
解决vue3项目跳转同一页面数据不刷新的问题
qq_44313787的博客
05-06 7673
原因：router-view使用了keep-alive组件，会被缓存，而vue-router的切换不用于传统的页面切换。是路由之间的切换，组件之间的切换，引用相同组件的时候，会被直接调用缓存里面的而不会调用created()，onMoun ted()函数。如图所示：要实现的功能是点击每一个tabs栏下的更多按钮，会跳转到“消息中心”页面，这是点击不用的“更多”按钮，跳转的路由页面是同一个，但是要求页面里的消息类型下拉选择框和列表数据要刷新，显示不同的数据。现在的问题是：页面跳转数据不刷新。
vue 自定义组件切换时刷新
weixin_45977625的博客
09-25 2211
我们在使用vue自定义组件时，常常会遇到切换组件的操作，但是切换组件的时候，如果没有处理好，组件内容就不会刷新。如：标签页下放自定义组件，切换标签时，组件里面的内容不刷新，导致页面停留在上一次的操作。那么我们应该如何来解决这个问题呢？接下来说说我在网上看到的两种方法 一、通过v-if来刷新 当我们在爷辈组件请求后台接口完成后要刷新子孙组件时，我们就可以在爷辈组件使用以下代码,实现子孙组件的刷新（感觉这种方法怪怪的，个人喜欢第二种方法） 上代码： //父组件内容 <child v-if="show"&g
vue打开子组件弹窗都刷新功能的实现
10-14
`:visible.sync`是一个Vue的双向绑定特性，它允许父组件和子组件之间共享和同步数据。当父组件改变`paramAddDialog`的值时，子组件的`visible`状态也会相应改变，从而实现弹窗的显示和关闭。 例如，在父组件中，...
使用Vue开发动态刷新Echarts组件的教程详解
08-27
本教程详解了使用Vue开发动态刷新Echarts组件的过程，从零开始，封装一个动态渲染数据的Echarts折线图组件，并且解释了如何将其应用于实际项目中。 一、准备工作 在开始开发之前，需要安装 Vue 和 Echarts。使用 ...
vue中如何让子组件修改父组件数据
08-27
在 Vue 中，watch 是一个非常重要的概念，它可以监听页面上数据的变化。当我们需要监听一个属性的变化时，就可以使用 watch。watch 有多种使用场景，下面将详细介绍。 1. 常见的使用场景 在 Vue 中，watch 是一个...
Vue页面刷新的三种方式
Brilliant Me 的博客
07-16 7989
vue页面刷新的三种方式 由于功能需求，需要离开页面前告知用户是否需要丢弃未保存的数据，这时候切换的菜单会失效，但是菜单依然会高亮错误。所以要进行一次页面刷新。 方法一 原地页面刷新 this.$router.go(0) location.refresh() ...
Vue页面动态保存查询参数于地址栏，刷新仍可继续查询上一次查询的数据
m0_46627730的博客
09-24 1721
前言 做条件查询时，有时候想保存当前查询的条件，以便刷新后直接按上一次查询的条件来查询数据。 借助webpack-merge实现动态保存查询条件 1：引入webpack-merge import merge from 'webpack-merge' //用于动态修改地址栏参数的 2：每次请求完数据就更新查询条件 this.chanceUrlQuery({stationId:saveStationId,status}) //每次请求完数据将这次的请求参数保存在地址栏 //修改路由参数
Vue实现搜索后地址栏路径改变，刷新界面不改变页面内容功能
smallteddy.blog.csdn.net
10-29 2650
1、功能演示 2、实现原理代码 首先这是我获取列表数据的代码，新增带加号这几行 private getTable(page: number, rows: number): void { let params: any = { page, rows }; + if(this.$route.query.unit) { + params.unit = this.$route.query.unit || ''; + }; Object.keys(this.form).
Vue-day05
weixin_43996260的博客
03-25 812
一、 子组件传值父组件 子组件调用父组件的方法 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） 子组件可以触发这个事件$emit('事件名字',传递的参数) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
Vue第9篇，Vue页面重置和刷新（Vue数据重置）
weixin_65793170的博客
11-24 1万+
一. this.reload()方法（体验度好，无空白页面，相当于页面数据重置））二. 利用vue中的路由方法（偏向于刷新页面）三. 利用window的reload方法（强制刷新）
Vue列表值改变，刷新问题
蓝天⊙白云的博客
04-24 3869
在使用vue做动态绑定时，发现list列表中存储的对象里的属性改变后，页面不会动态更新。 为啥会这样是因为： 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 // 解决方法一：注意要引入Vue this.$set(this.addFormData, 'projectCode', ob.code) this.$set(this.tableData, index, item) //解决办法二;不推荐因为消耗性能 this.userInfo['sex']='男'; this.$f
vue 实现局部组件刷新
热门推荐
weixin_43299180的博客
01-07 1万+
在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下： 1、 provide / indect 方法 使用 v-if 方法来控制 router-view 的显示隐藏 在 App.vue 页面 <template> <div id="app"> <router-view v-if="isActive"/> </div> </template> <script> export default { name: '
Vue实现父子组件页面刷新的常用方法
一宿君
04-21 1万+
Vue实现父子组件页面刷新的常用方法
vue中如何刷新指定的子组件，重置组件，强制刷新，重新加载子组件：key = “value“
weixin_47336389的博客
11-22 6897
vue中的key的作用主要是为了高效的更新dom, 它也可以用于强制替换元素/组件而不是重复使用它，完成的触发组件的生命周期钩子，触发过渡。通过改变一个变量来实现组件的强制刷新，只要key的值改变，组件就会自动刷新，所以key的值可以任何类型。我想实现的效果就是，在我需要的地方重新加载这个子组件，进行一次强制刷新效果。
vue中搜索组件和其他组件之间的一个刷新的问题
最新发布
05-10
在Vue中，搜索组件和其他组件之间存在一个刷新的问题，这是因为搜索组件一般会与其他组件共享数据，当搜索结果发生变化时，这些共享的数据也会发生变化，从而影响其他组件的显示。 为了解决这个问题，首先需要注意...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值