参数改变，跳转页面数据不刷新的解决办法

最新推荐文章于 2024-05-14 19:58:36 发布
最新推荐文章于 2024-05-14 19:58:36 发布
阅读量3.4k 收藏 2
点赞数 1
分类专栏： vue params传参 文章标签： vue传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38367710/article/details/83589754
版权

Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不刷新的解决办法。同路由不同参数的情况
watch: {

‘$route’ (to, from) {

this.$router.go(0);
}}
用这段代码来监视路由变化。。

飞翔代码的code
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解解决Vue相同路由参数不同不会刷新的问题
12-29
通常情况下我们喜欢设置keepAlive 包裹 router-view <div id=app> <keep> <router></router> </keep> </div> 同时在created 中触发请求，在路由参数不同的情况下并不会执行对应的操作。 解决方法： 1、给 router-view 设置 key 属性为路由的完整路径 <keep> <router key=$route.fullPath></router> </keep> 这种方法我觉得应该
vue携带参数路由跳转页面未刷新问题解决
lu_qingshan的博客
07-16 448
后台管理系统昨天碰到的一个小问题，点击订单号进入该订单的详情页面，需要将这个订单号当作参数传递过去，路由发生改变但是页面没有发生变化； 可以看到路由发生了变化，但是页面是没有变化的，还是订单一的页面，于是在订单详情页面监听了传过来的这个参数，可以看到如下； watch: { // 方法1 //监听路由是否变化 $route(to, from) { console.log(to.params.orderNo, from.params.orderNo); } }
2024年最全若依项目的常见报错以及解决方案(2)，2024年最新字节跳动前端面试经历及总结
最新发布
2401_84446712的博客
05-14 972
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。数据库表的字段都是大写Id，但是生成代码的时候是小写。
若依框架不同路由跳转到同一页面数据没刷新
敲代码无敌小奶龙的博客
06-02 1279
在不同的页面中可能会调用到同一个页面的组件，这时候我们会发现在不关闭这个页面的情况的下，从别的页面重新跳转到这个页面组件没被刷新。2023.6.2今天我解决了使用若依框架在不同路由跳转到同一个页面的时候组件没被刷新的问题。通过指定唯一的key值来强制刷新不同的路由跳转，这样就可以解决这个问题了。
若依框架前端切换TagView时刷新问题
luochengbang的专栏
02-04 1万+
改造若依框架点击tag切换时都是刷新问题。点击顶部tag切换时，永远都是刷新的。刷新问题两种情况：普通view切换时刷新及iFrame切换刷新
VUE的router-link不刷新,路由跳转后缓存还在的终极一步到位的解决方法,也适用与若依框架
子豪的博客
09-07 4085
如果你用的是若依框架的话,直接打开src/api/router/index.js路由配置项。我是要跳转到/system/sale-saleDetail/index/+ id参数。只要是true就可以每次跳转都刷新缓存了,默认是false.网上找了一大堆,屁用都没有,自己琢磨了一下简单的要死.网上搞得那些方法没一个有用的,浪费时间啊!比如,我的html是这样的。
若依 this.$router.push 同地址不同参，页面不刷新问题
02-04 1179
若依框架就是一个后台管理框架
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
React Router如何在url参数不同的情况下跳转页面不更新解决方案
01-20
总结一下，解决React Router在URL参数变化时不更新页面的关键在于监听props的变化，特别是在`componentWillReceiveProps`生命周期方法中。通过比较新的props和旧的props，我们可以判断是否需要更新组件状态，从而...
vue 解决路由只变化参数页面组件不更新问题
10-16
通过这种方式，你可以确保无论何时查询参数改变，相关组件都能正确地响应并更新其状态。在开发过程中，理解Vue Router的工作机制以及如何利用`watch`和路由守卫是至关重要的，这将帮助你更好地控制应用程序的导航和...
JQuery.get提交页面不跳转的解决方法
10-24
要解决页面不跳转的问题，我们需要在回调函数中明确地执行跳转操作。有以下两种常见的方法： 1. 使用 `document.location.href`： ```javascript jQuery.get("About.aspx", { name: "alex" }, function () { ...
websocket连接两个页面，一个页面控制另外一个页面跳转。
03-25
大客户端可以发送消息到小客户端，并且大客户端可以发送“jump”命令到小客户端控制小客户端页面跳转到百度。其中系统管理页面记录所有大端与小端发送的消息，以及大端与小端的id。
微信小程序 动态修改页面数据及参数传递过程详解
10-16
在微信小程序开发中，动态修改页面数据和参数传递是核心功能之一，这使得开发者能够创建交互性强、用户体验良好的应用。本文将深入探讨这两个关键概念。 首先，我们要理解微信小程序的数据模型。微信小程序采用单向...
vue解决跳转相同地址但是参数不同时页面不刷新的问题
m0_43383724的博客
01-11 1385
vue解决跳转相同地址但是参数不同时页面不刷新的问题
针对Vue相同路由不同参数的刷新问题
weixin_34288121的博客
09-29 451
在使用vue和vue-router开发spa应用时，我们会遇到这样一种问题。当页面跳转时，组件本身并没有发生改变： // 路由映射关系'/form/:type' // 当前页面路由/form/shop1 this.$router.push({ name: 'form', params: { type: 'shop2' }) 这时我们进行路...
第二次跳转到同一页面中 页面不刷新
Harley567
11-18 1066
使用同一路由携带不同参数,本质上是重用相同的组件实例,默认在跳转路由时会采用缓 存策略,并不会刷新当前路由组件,因此不会调用组件的生命周期钩子函数.
若依项目的常见报错以及解决方案
热门推荐
小宝的宝呢的博客
02-24 2万+
目录 1，系统接口500异常 2，页面出不来 原因分析： 解决方案： 3，获取当前用户名失败 原因分析： 4，下拉框中的值无法选中 原因分析： 解决方案： 5，表单验证导致前端报错 原因分析： 解决方案： 6，required URL template variable 'name' for method parameter type String is not present... 7，net::ERR_CONNECTION_TIMED_OUT 8，提交时调用的方法名写错 .
若依页面跳转，每次都刷新creatd,mounted函数
m0_61601708的博客
10-18 957
【代码】若依页面跳转，每次都刷新creatd,mounted函数。
uniapp强制刷新页面
09-25
uniapp中可以通过多种方法来强制刷新当前页面。其中，常用的方法有以下几种： 方法一：利用路由，强制刷新当前页面 ``` setTimeout(() => { this.$router.go(0); }, 500); ``` 方法二：关闭当前页面，跳转到应用内的某个页面（如果想刷新当前页面也可以使用该方法）： ``` uni.redirectTo({ url: '../details/details?gid=' + this.gid, //写你的路径 }); ``` 还可以使用定时器来对该方法进行优化，使其稍微延缓动画： ``` setTimeout(() => { uni.redirectTo({ url: '../details/details?gid=' + this.gid, }); }, 500); ``` 方法三：通过获取该页面实例执行其内部的生命周期方法来刷新页面 ``` reload() { const pages = getCurrentPages(); // 声明一个pages使用getCurrentPages方法 const curPage = pages[pages.length - 1]; // 声明一个当前页面 curPage.onLoad(curPage.options); // 传入参数 curPage.onShow(); curPage.onReady(); // 执行刷新 } ``` 另外，如果页面视图没有随着数据的变化而改变，可以使用`this.$forceUpdate()`来强制刷新页面。 希望以上方法能帮助到您。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值