关于Vue路由刷新路由页面数据变化异常

最新推荐文章于 2024-08-20 18:01:54 发布
最新推荐文章于 2024-08-20 18:01:54 发布
阅读量269 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57339336/article/details/131976583
版权
在App.vue组件中定义的reload方法通过provide/inject传递给子孙组件，用于更新路由数据。然而，使用nextTick在更新过程中造成了渲染延迟，导致显示上一个页面的数据。作者发现这个问题可能与nextTick的异步执行有关，改用setTimeout成功解决了这个问题。
摘要由CSDN通过智能技术生成

个人在App.vue上写了一个方法reload，并用provide 和 inject传给子孙组件，通过该方法对路由进行数据更新。

 

 但中间用的nextTick,导致我使用router.push来传递id更新当前页面出现渲染的页面数据是上一个页面的数据。

后面思考了一下，可能是nextTick渲染的异步流程有点问题，一直渲染的都是上个页面的渲染数据。后面改成setTImeout解决问题。

跑步的鱼丶
关注
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue在App.vue文件中监听路由变化刷新页面操作
10-14
总体来说，Vue在App.vue文件中监听路由变化刷新页面操作涉及了多个方面的技术点，包括Vue Router的使用、JavaScript的事件监听、Vue的生命周期管理以及组件间的通信。理解这些知识点有助于开发者更好地维护和开发Vue...
vue 使用了浏览器的刷新之后报错_Vue项目部署到tomcat，配置了404页面转到index.html，但是刷新页面后浏览器地址栏变为index.html...
weixin_39955149的博客
12-20 618
问题描述我的Vue项目需要部署到tomcat下，放在webapps下的一个名为mapedu的文件夹内，在VueRoute中所有的路由都加了mapedu前缀。也配置了/webapps/mapedu/WEB-INF/web.xml文件如下<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org...
Vue3路由不及时刷新问题解决
最新发布
qq_57490170的博客
08-20 453
记录日常bug
刷新页面会导致页面路由重置的问题怎么解决
weixin_51654689的博客
05-28 3368
使用持久化存储：将路由信息存储在本地存储（如LocalStorage或SessionStorage）中，在应用程序初始化时从存储中读取路由信息，并恢复到相应的路由状态。这样在刷新页面后，可以从存储中获取路由信息，并重新导航到之前的路由。使用服务器端渲染（SSR）：使用服务器端渲染技术将Vue应用程序的初始状态和路由信息在服务器端生成，并在页面加载时将其提供给客户端。这样，刷新页面时，服务器会重新生成页面，并保持路由状态的一致性。使用路由懒加载：通过使用路由懒加载，可以将路由组件按需加载。
解决vue-router中页面刷新和路由改变时导航条不一致的问题
1281024的博客
05-10 974
1.当我们在使用路由时，如果有导航条此时，我们在url地址栏目改变路由地址，此时路由内容更改但，导航条样式没有随着改动。2.当页面刷新时，url导航地址栏的路由和当前页面显示的不一致。3.当在页面中跳转页面时，导航条样式不变。1.通过watch监听路由地址的改变。2.使用钩子函数，改变路由。
vue中nextTick使用引起的一个小问题
趟过java，遇见web
12-03 1194
vue，watcher，nextTick，宏观任务，微观任务，antVF2
vue实现路由不变的情况下，刷新页面操作示例
10-15
主要介绍了vue实现路由不变的情况下，刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
vue通过路由实现页面刷新的方法
08-28
Vue 通过路由实现页面刷新的方法 在 Vue 项目中，页面刷新是一个常见的问题， especially when dealing with complex applications. 在本文中，我们将探讨通过路由实现页面刷新的方法，解决购物车页面跳转到详情页...
VUE动态路由跳转后，url改变，页面未刷新--究极解决方案
lmj0920的博客
08-12 3544
VUE动态路由跳转后，url改变，页面未刷新--究极解决方案
vue 动态路由刷新失效及404页面处理
Gao_wbe的博客
02-12 7024
vue动态路由时会遇到一些坑，这里总结一下，并提供解决思路。
vuex存储用户登录信息以及解决页面刷新vuex数据丢失问题
lucky2_的博客
03-15 2508
vuex存储用户登录信息 前提是已经 npm install vuex --save 可以在新项目中建立一个文件夹，例如 store，包含store.js 在这里以存储用户信息为例： store.js中 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { name: JSON.parse(localStorage.getItem("us
vue动态生成路由及常见问题
Zichen_Lin的博客
10-16 3548
在一些常见的 RBAC 系统中，对于角色和权限的管理是极其重要的。一个人可以拥有多个`角色`，而一个角色又会被赋予多个`权限`。不同的角色在登录后台系统后，看到的系统菜单也是不同的。在前后端不分离的项目中，后端可以整合 `Spring Security`、`Shiro`等安全框架对页面元素进行标签化管理。但是随着前后分离模式的普及，我们现常常把展示逻辑放到前端来完成。本文就详细聊一聊在 vue 中如何实现对于菜单的动态控制。
vue-router 三级路由，路由跳转页面异常白屏或404，或刷新三级路由页面后一级和二级路由菜单丢失
tangdou369098655的博客
02-22 1873
某些时候是因为二级和三级的路由共用router-view，可以使用router-view 和 redirect 解决问题。欢迎大家指出文章需要改正之处~
Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不刷新的解决办法
zhan_lijian的博客
06-24 1万+
this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。 this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。 关于 push() 方...
关于Vue刷新后丢失动态路由
gao_wg的博客
11-21 8482
页面刷新，动态路由丢失
vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path
热门推荐
ZHANG_666
05-12 4万+
vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter 动态路由一般是从后端获取 然后经过数据格式处理 但在页面刷新后会出现一下警告： vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other” 但通过getRouters又能够获取到所有的异步路由 分析:页面刷新后由于是异步获取的原
vue动态路由刷新匹配错误问题以及解决办法
masierty的博客
05-24 4916
​ 目录一、了解动态路由二、解决问题结论 一、了解动态路由 我这里说的动态路由指的是，由后端提供当前角色可以访问的所有路径，前端提前写好路径与组件之间的映射也就是route，然后根据后端返回的url进行匹配，将匹配到的route加入到router里面。 后端返回的数据大概是这样： 提前写好的route的path一定要和上面的url对应： export default { path: '/main/analysis/overview', name: 'overview', component:
vue 路由刷新父页面
03-28
在Vue中，可以通过路由刷新父页面的方法有两种：使用路由参数和使用事件总线。 1. 使用路由参数：可以在路由跳转时传递参数给父页面，然后在父页面中监听参数的变化，从而实现刷新。具体步骤如下： - 在路由配置中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值