关于Vue路由当前页面数据不更新得解决问题

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 510平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄7年

关注

原创最新推荐文章于 2026-03-28 09:15:56 发布 510 阅读 AI 写同款· GEO 优化 ›

Vue 路由回退页面不刷新？深度剖析及实用解决方案汇总本文聚焦 Vue 路由跳转回退后页面不刷新问题，深入剖析其产生原因，详细阐述包括监听路由变化、利用多种钩子函数、借助 provide/inject 组合及 Vuex 状态管理等在内的多种实用解决方案，并强调需依项目需求灵活选用，同时注重数据更新时的性能优化，以提升用户体验，助力开发者构建流畅 Vue 应用。阅读详情

话不多说，在你当前得路由页面下加上这段代码：

watch:{
    $route(to,from){
      this.$router.go(0)
    }
  },

造成这个的原因主要是路由的重叠，用 this.$router.go(0)返回上层页面即可

收录于

前端

当前文章被收录于：

前端

5 篇文章 0 人学习

前端

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#vue #html #javascript #vue.js #es6

【零基础入门VUE】VueJS - 概述不会对 DOM 进行更改，而是创建 DOM 的副本，该副本以 JavaScript 数据结构的形式存在。最终的更改会更新到真实的 DOM，用户将看到它的变化。随后，对两个 JavaScript 对象进行比较，并在真实 DOM 中更新最终的更改。Ember 添加了 glimmer 渲染引擎，旨在提高重新渲染性能，这与使用虚拟 DOM 的 VueJS 和 React 是类似的概念。随着时间的推移，淘汰赛的发展速度已经放缓。VueJS 继承了 Angular 和 React 的优点，并构建了一个强大的库。阅读详情

相关推荐

VUE路由变更页面未更新问题

VUE路由变更页面未更新业务需求实现方案遇到的问题问题定位以及解决业务需求在做一个管理用户账户下APP的网站，在主页需要切换应用APP的ID，来显示不同APP对应的数据，对不同APP进行操作。实现方案由于切换APP对应的是整个页面的更新，考虑通过将APPID直接作为URL参数，切换时，变更URL地址后的APPID，对应页面数据通过URL参数进行请求。此时需要维护一个全局变量存储这个APPI...

HCJS_Zee的博客 1630

vue 路由前进和后退界面刷新

问题描述：点击编辑按钮跳转到新界面，编辑之后保存跳转到原来的界面，这时候原来的界面没有刷新， this.$router.back(-1); 返回到上一个界面用watch 监听路由的变化，通过监听路由的变化，从新加载数据 watch: { $route(to) { if (to.path === '/panDian') { this.ajaxLoadDat...

木槿之夏 1766

结构光三维重建2——多频外差解包裹

本文深入解析了结构光三维重建中的多频外差解包裹技术。针对四步相移法产生的相位包裹问题，该方法通过投影多组不同频率的条纹光，利用外差原理逐级解算，最终获得精确、连续的绝对相位值，是实现高精度、稳健三维重建的关键步骤。

weixin_29056101的博客 350

Vue 路由跳转【返回、刷新、跳转】

Vue 路由跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失；向前或者向后跳转n个页面，n可为正整数或负整数 this.$router.go(-1)：后退+刷新 this.$router.go(0)：刷新； this.$router.go(1) ：前进 this.$router.back() 原页表表单中的内

estrusKing的博客 1万+

保姆级图解：FD-SOI工艺流程中的关键三步（外延生长、应变硅、HKMG）

本文详细解析了FD-SOI工艺流程中的三大关键技术：外延生长、应变硅工程和HKMG集成。通过选择性外延生长技术优化接触电阻，利用应变硅提升载流子迁移率，并结合先栅高k金属栅工艺实现精准栅极控制，FD-SOI技术在智能手机处理器和自动驾驶芯片制造中展现出卓越的低功耗与高性能平衡。

weixin_29267307的博客 490

企业微信群机器人Webhook配置全攻略：从创建到发送消息的完整流程

本文详细介绍了企业微信群机器人Webhook的配置流程，从创建机器人到获取Webhook地址，再到发送各类消息的完整步骤。通过Python代码示例展示了文本、Markdown等消息类型的发送方法，并提供了性能优化建议和常见问题排查技巧，帮助企业高效实现自动化消息推送。

weixin_29208327的博客 6834

vue中$router.back()和$router.go()

返回上一页，有两种方法： 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。 go(-1):原页面表单中的内容会丢失； this.$router.go(-1):后退+刷新； this.$router.go(0):刷新； this.$router.go(1):前

qq_43638735的博客 9249

oracle rac 成本及架构,Oracle Extended RAC 架构实战

Extended-RAC，是RAC技术的一种扩展增强。Extended-RAC是通过专用光纤(或租用裸光纤)加DWDM(波分设备)设备将两个不同楼栋/同城甚至异地机房进行相连，将数据库主机、存储分别放置于不同机房，利用存储复制/ASM Mirror等技术进行数据复制进行搭建的一种远距离集群架构。Extended RAC需要将不同楼栋/同城甚至异地机房通过专用光纤(或租用裸光纤)加DWDM(光纤复用...

weixin_33812391的博客 2453

vue中this.$router.back()、this.$router.go()的区别使用

weixin_45941064的博客 1万+

5分钟搞懂异构图注意力网络（HAN）：从元路径到节点聚合的全流程解析

本文深入解析异构图注意力网络（HAN）的核心原理与实战应用，从元路径设计到多级注意力实现的全流程。HAN通过节点级和语义级双重注意力机制，有效处理包含多种节点和边类型的异构图数据，在电商推荐、学术网络分析等场景展现卓越性能。文章提供DGL实现代码和调参技巧，帮助开发者快速掌握这一强大工具。

weixin_29056701的博客 311

ESP32 CAM使用教程（入门级）

串口被占用，可以关闭其他使用到串口的界面；先将手机也连上wifi，然后使用手机浏览器打开这个IP地址，注意手机连接的wifi需要和开发板的wifi一致，也就是程序里自己修改的那个wifi，否则无法打开IP地址；将开发板连接到电脑，点击点击工具→端口，然后选择自己实际接的COM口，不清楚COM口的可以打开电脑设备管理器查看一下，插拔设备看看哪个COM口会刷新就是哪个COM口；安装好esp32库之后，点击工具→开发板→esp32→AI Thinker ESP32-CAM，型号要仔细找找，不要选错了；

qq_34426854的博客 2万+

Vue------this.$router.back()、this.$router.go()的异同

返回上一个页面： 1.$router.back() 2.$router.go() 区别点在于： go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数； this.$router.back():后退； this.$router.back(0) 刷新； this.$router.back(1)：前进

绝世唐门三哥的博客，多多关注，会不定期产出高质量文章和大家共享！ 5845

YOLOv8改进策略【损失函数篇】| 2024 引进Focaler-IoU损失函数加强边界框回归 (Focaler-DIoU、Focaler-GIoU、Focaler-CIoU)

本文记录的是改进YOLOv8的损失函数，将其替换成。现有研究通过利用边界框之间的几何关系来提高回归性能，但忽略了困难样本和简单样本分布对边界框回归的影响。不同检测任务中困难样本和简单样本的分布不同，对于简单样本占主导的检测任务，关注简单样本的边界框回归有助于提高检测性能；对于困难样本比例较高的检测任务，需要关注困难样本的边界框回归。，提高检测器在不同检测任务中的性能。实现的。

Limiiiing的博客 1221

【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。

慕白Lee的博客 1万+

关闭搜狗输入法右下角广告的解决方案

本文主要介绍了关闭搜狗输入法右下角广告的解决方案，希望能对使用搜狗输入法的同学们有所帮助。文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 1万+

霍尼韦尔SoftMaster使用说明

vue项目,更新完数据后如何刷新当前页面

今天码的时候，我删除了一条数据，删除完后发现获取完之后当前页面的数据并没有刷新，只有做一下其他的操作比如往前跳转一页再跳回来，数据才会刷新。然后其他的新增、编辑功能并不会出现这种情况，都是在请求完成后数据立马刷新想了一下发现可以这样做如果你要刷新的页面是当前页面，那么你只需要直接重新调接口更新表格数据，不必刷新整个页面例如·： toDelete(id) { this.$co...

weixin_42243479的博客 5384

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0，兼容Win7/Win10/WinXP，解压就可用。

Vue中解决路由切换，组件不更新问题的方法

Vue Router可以实现路由的切换，也就是组件之间的切换，它不同于传统页面的切换，所以在使用的时候经常会出现路由已经切换，但是组件没有更新的问题(只要实现对页面的刷新，组件就会重新进行加载)：一、问题呈现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

PILIpilipala的博客 6275

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件，这是C++版本的破解文件

【Vue】解决路由切换，页面不更新的实用方法

前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。

汪小穆的博客 7万+

【汇总7种】--Vue 数据更新了但页面没有更新的情况

**前言：**在vue项目中，有些我们会遇到修改完数据，但是视图却没有更新的情况。具体的场景不一样，解决问题的方法也不一样。在网上看了很多文章，在此总结汇总一下。针对，数据更新视图没有更新的情况，建议深入了解一下，vue的响应式原理。如果，你发现自己需要在vue中做一次强制更新，99.9%的情况，是你在某个地方做错了事。（尴尬。。。）一、vue数据更新但页面没有更新的7种情况汇总 1.vue无法检测实例被创建时，不存在于data中的property 原因：由于vue会在初始化实例时，对proper

qq_26780317的博客 3万+

vue更新路由router-view复用组件内容不刷新

本文知识点比较简单，主要面向vue新人解惑，vue前辈请忽略。实现功能：见上图，这是一个产品列表，当进入不同列表时应该更新内容。代码如下： //router配置 { path: "/products/:category", name: "Products", components: { ... } ...

日常爱喝茶，闲时聊科技 6031

解决前端Vue数据不更新的问题：深入分析与解决方案

解决前端vue数据不更新的问题，深入分析与解决方案

嗨，欢迎来到我的优快云博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。 7478

vue 解决路由参数变化 当前页面以及页面内的组件未更新的问题

需求描述：当前路由不变，参数改变，页面进行动态渲染如：/users/1 -> /users/2 ，参数由1变为2，页面数据需要更新，但是一般情况下原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。先介绍用到的两个方法 watch 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名...

Kotoba209_的博客 3291

VueJS 之路由

在 VueJS 中，路由可以理解为 Hash 地址与组件的映射关系。由于 VueJS 构建的是单页面应用程序，在构造具有如下效果的页面时，无法直接切换页面（因为仅有一个页面），但可以通过切换组件来达到相同的效果。路由在 VueJS 及 Web 后端中的概念稍有不同，但都表示某两者之间的映射关系。锚点是网页制作中超级链接的一种，是一种能够定位当前页面的元素的超级链接。

两个月亮 1011

3.为什么我的vue数据修改后视图未更新，梳理Vue2和Vue3中常见的数据不更新场景

Vue数据不更新问题的核心在于响应式机制的实现。Vue2受限于Object.defineProperty，需通过辅助方法（如$set）弥补不足；而Vue3通过Proxy提供了更完善的响应式支持。无论是Vue2还是Vue3，理解其原理并遵循“数据驱动视图”的原则，配合最佳实践，都能有效避免视图更新异常。

qq_1401820561的博客 2681

Vue数据更新，页面却没有更新的几种情况及解决方法

LFQP_的博客 3万+

Vue——路由变化页面数据不刷新问题

在项目中出现的情况是路由变化后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。情况一：在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。注意： 1.this.$ro...