解决this.$router.push()带参数跳转时，页面地址改变，数据却没有刷新的问题。

最新推荐文章于 2024-07-23 14:13:51 发布
最新推荐文章于 2024-07-23 14:13:51 发布
阅读量3.6k 收藏 3
点赞数 1
分类专栏： Vue+Elementui工作随笔 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45791799/article/details/120764270
版权

一、问题

今天遇到一个问题，我用this.$router.push()带参数跳转时，页面的url地址发生了改变，但页面却没有刷新，需要刷新一下才能重新获取数据，查看资料找到了解决方案。

二、原因

created并不是每次进入页面都会执行，因为vue会使用页面的相同组件，所以这里才不会进行数据刷新。

三、解决方法

当路由发生跳转时，需要在watch里监听路由的变化
在这里插入图片描述

邵邵邵
关注
专栏目录
vue中使用 this.$router.push跳转页面，地址跳转成功但是页面不刷新
坚果程序开发存档博客专栏
08-02 3202
vue中使用 this.$router.push跳转页面，地址跳转成功但是页面不刷新问题，使用 watch，观察路由，发生变化重新获取数据： <script> export default { data() { return { data: {} } }, methods: { getDataList() { },
Vue中this.$router.push（参数） 实现页面跳转
lucky__peng的博客
12-04 1167
// push参数为字符串 this.$router.push('/hello') // 参数为对象 this.$router.push({ path: '/hello' }) // 对象中有query属性，相当于发送了一次get请求，请求参数会显示在浏览器地址栏中 this.$router.push({ name:'Register', query: { id: this.id } ) /* 对象中有params属性，相当于发送了一次post请求，请求参数不会显示在浏览器地址栏中， 并且刷新页面之后
this.$router.push到当前页面，只是传入参数不同，页面不刷新的问题解决
高先生的猫
08-26 4139
问题 在vue中使用$this.router.push()方法，如果只是传入的参数不同，会出现url地址变化了，但是页面没有重新请求数据，需要刷新一下页面才有新的数据加载。 解决方式 方式1：监听路由的变化 在页面的watch中，监听$router的变化 watch: { $route (to, from) { this.$router.go(0) } } 其中this.$router.go(0)为刷新页面，但此方法可能在Safari中无法实现，还可以用js原生的方法：window.lo.
vue $router.push 跳转到当前页面 地址栏变但是数据不刷新
qq_26241443的博客
03-30 2658
vue-router跳转页面时，如果name和当前页面的name一样，只是query的参数不一样，那么会导致页面内容不刷新，因为页面内容是在created中根据route中的参数来获取的，但是跳转当前页面不会出发created。
鸿蒙：页面路由router的基本使用
最新发布
m0_46924916的博客
07-23 892
注：本文章只是简单概述基本使用，详情请看文档， 另：官方更推荐Navigation进行跳转。页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从和几个方面介绍Router模块提供的功能。Router适用于间与模块内页面切换，通过每个页面的url实现模块间解耦。模块内页面跳转时，为了实现更好的转场动效场景不建议使用该模块，推荐使用。
this.$router.push()跳转页面不刷新 （分页组件点击，query参数变化）
weixin_46331416的博客
02-23 3947
this.$router.push()跳转页面不刷新 问题： 我有一个动态路由：/page/:offset?,但是我用query传参的时候，页面却不刷新，
VUE this.$router.push跳转页面传值不同 created 函数只调用一次 页面不刷新解决办法
alokka的博客
07-09 7398
问题： 在vue中使用 this.$router.push() 方法，如果只是传入的参数不同，会出现 url 地址变化了，但是页面没有重新请求数据，生命周期函数未调用，需要刷新一下页面才有新的数据加载。 原因： 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行
this.$router.push跳转不刷新解决
CHIHIRO1023的博客
10-09 749
this.$router.push跳转到新页面，页面没有刷新。在需要刷新的页面写上：beforeRouteEnter。
vue项目使用$router.go(-1)返回时刷新原来的界面操作
10-15
总之，在Vue项目中处理`$router.go(-1)`返回操作时需要刷新页面的问题，关键在于对路由跳转行为的理解和对Vue响应式系统的灵活运用。根据不同的业务场景选择合适的方法，可以有效地解决页面状态保持和更新的问题。
this.$router.push传递参数失败undefined
明日复明日的博客
05-10 6535
首先据我查的资料，this.$router.push路由跳转有以下几种形式： 1. 不带参数 this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) 2. query传参 this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:
this.$router.push跳转页面后并刷新页面
08-18
在 Vue.js 中，`this.$router.push` 方法会进行页面的跳转，但不会刷新页面。如果你希望在页面跳转后刷新页面，可以考虑使用以下方法： 1. 通过给 `this.$router.push` 方法传递一个新的 `key` 参数来实现强制刷新...
this.$router.push跳转页面刷新
08-24
还有一种方法是在中转组件中，使用this.$router.push跳转页面之前，先调用一个方法来获取参数，在跳转时将参数作为query传递给目标页面，这样目标页面就会刷新。<span class="em">1</span><span class="em">2</span>...
this.$router.push点了后hash地址改变了，页面却不跳转
weixin_54048131的博客
07-30 7930
this.$router.push点了后hash地址改变了，页面却不跳转
this.$router.push方法地址跳转了但页面加载有问题，重新刷新才有用的问题
qq_44774831的博客
04-29 3365
this.$router.push问题分析解决后续 问题 页面问题： 后台报错： 分析 查了一些资料发现：是使用了keep-alive对组件进行了缓存，而后改用actived生命周期函数，依旧是无效，这大概率是因为当初为了做面包屑导航，使用了嵌套路由的结构：一个路由里面嵌套了Children属性 结果就是现在导致返回上一级路由时，不触发actived生命周期函数了。 解决 当前页面不使用不使用缓存，并且给router-view加上key 可以在app.vue里面的<template添加下面的代码
Vue路由this.$router.push转跳同一个页面不刷新
无意义
07-21 2629
不知道大家有没有遇到重复router.push进入同一个页面的时候虽然url传递的参数不一样但是页面并不会进行刷新。 <template> <el-container> <header></header> <el-main > <router-view :key="$route.fullPath"></router-view> </el-main> &l
VueRouter 中' this.$router.push '跳转页面不刷新的问题解决
热门推荐
gyy191425的博客
05-28 1万+
问题疑难 在写vue项目 路由跳转时, 肯定遇到过 路由跳转到新页面后 通过接口查询得到的后台数据, 这时候再返回上一个页面再点击路由跳转的时候会发现 新页面通过接口查询的数据没有了。 这是因为再你第二次点击路由跳转的时候，你的初始函数方法mounted没有执行。 解决办法有两种： 第一种：将mounted函数 替换成activated函数。 mounted(){ 在这里插入代码片 } ...
使用this.$router.push传不同的id跳如当前的页面出现跳转之后页面不刷新问题
熟悉 vue2 vue3 jquery js echarts
08-22 369
$router.push
VUE使用this.$router.push()不同入参，相同URL页面不刷新问题解决方法
RisoKome的博客
09-02 1273
**问题场景：**首页搜索栏输入不同关键字，使用this.$router.push()不同入参，相同URL页面不刷新 **解决措施：**如下示例，每次检索时调用一次this.reload()即可。 **处理思路：**使用VUE的v-if控制DOM App.vue <template> <!-- VUE 路由 --> <router-view v-if="RouteState"></router-view> </template> JS 注意：th
vue中页面路由this.route.push跳转页面不刷新
IT博客技术分享
04-28 3822
注意:created()方法是无效的 方法:在需要刷新的页面添加以下内容 解决办法有两种： 1、使用activated:{}周期函数代替mounted:{}函数即可。 将mounted函数 替换成activated函数。 mounted(){ 在这里插入代码片 } ==》 activated（）{ 在这里插入代码片 } 2、监听路由 第二种：通过路由监听的方法。将mounted下的方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值