Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不刷新的解决办法

最新推荐文章于 2024-07-14 11:38:38 发布
最新推荐文章于 2024-07-14 11:38:38 发布
阅读量1.5w 收藏 2
点赞数 1
分类专栏： Vue VueRouter

再跳转后的路由观察路由变化，进行页面刷新。

watch: {

    '$route' (to, from) {

     this.$router.go(0);

}}

参考https://blog.csdn.net/wulala_orz/article/details/78928524#commentBox

炯炯灯
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用 this.$router.push跳转页面，地址跳转成功但是页面不刷新
坚果程序开发存档博客专栏
08-02 3198
vue中使用 this.$router.push跳转页面，地址跳转成功但是页面不刷新问题，使用 watch，观察路由，发生变化重新获取数据： <script> export default { data() { return { data: {} } }, methods: { getDataList() { },
Vue this.route.push跳转页面不刷新
Remilea的博客
06-04 1188
使用this.route.push跳转页面时数据没有刷新，我在网上查找到了几种方法： 1、使用activated():{}周期函数代替mounted():{} 组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 将请求数据的函数写在 activated():{}，每次进入页面就能获取到最新数据。 activated ():{ //this.getData() } 2、watch监听路由，请求数据 watch: { '$ro
Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不刷新的解决办法...
weixin_30879169的博客
12-21 1165
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写： goPage(ParentDeptCode2,DeptCode2,hosName,hosId){ this.$router.push({ path:'/ChoiceTime', query:{ DeptCode:ParentDeptCode2, ...
Vue用router.push（传参）跳转页面，参数改变，跳转页面数据不自动刷新需手动刷新的解决办法
qq_41224500的博客
08-21 2615
项目场景： 在vue前端工程里，存在通过点击连接传参，到另一个页面，并根据参数进行刷新页面 问题描述： vue跳转时通过使用router进行跳转，跳转后参数传到了，但是页面还是上一个参数的数据，页面的数据并没有更新，点击刷新后，数据才是最新的参数传进来的 总页面，点击调转方法： gotoGpProcess(row) { let sync_id = row.sync_id; sessionStorage.setItem("gpsync_id", sync_id);
$router.push 不生效的问题
最新发布
滴水石穿
07-14 400
本问题的发生和解决显示，vue代码在执行路由操作时，不是同步阻塞型的，而是异步非阻塞型。即调用 this.$router.push 代码后，一方面开始准备跳转，同时代码也继续向下执行，一旦二者有路由冲突，那么结果就是难以预料的了。
使用this.$router.push()跳转时，页面没跳转到新路径，反而拼接到原路径后了
qq_29442755的博客
06-13 4207
在导航栏使用this.$router.push({path: 'download'})进行跳转时，发现没跳转到我想要到download路径下，反而把download拼接到了原路由后，如下： 原路由是这样的： 在这个页面下点击导航栏，想跳转到download页面，出现如下效果： 最后发现问题是因为path里没加‘/’，应写成this.$router.push({path: '/download'}) 现在可以正常跳转了： ...
vue-router同路由$router.push不跳转一个简单解决方案
热门推荐
wulala_orz的博客
12-29 3万+
vue-router同路由$router.push不跳转一个简单解决方案vue-router跳转一般是这么写：toCurrentPage: function(thisId){ this.$router.push({path:'/test ', query: { id: thisId, option: ""}}); }但是当遇到，需要跳转同页面不同query的情况，上面的方法不起
vue使用$router.push跳转页面组件不刷新、始终复用的问题
qq_36215993的博客
05-13 2751
需求 在一个如下图的表格中 点击图表按钮可以跳转到图表页面，图表页面的数据是根据设备的序号调用web api来获取的。 遇到的问题是每次进入图表页面，参数是传过来了，但是图表始终是一个复用的状态，不会根据ID的不同进行重新渲染。 图表页面如下图： 解决方案 通过beforeRouteLeave来达到每次离开图表页面时，对图表页面的组件进行销毁的目的。 看代码： <template> <div> <el-card> <Chart
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
然而，在Vue-Router 3.0版本中，开发者可能会遇到一个常见问题：使用`router.push`进行页面跳转时，URL会改变，但页面内容不会自动更新，除非手动刷新页面。这个问题在GitHub上也有相关的讨论，特别是在3.0.1版本中...
Vue this.$router.push(参数)实现页面跳转操作
10-14
本文将详细介绍如何使用Vue实例中的`this.$router.push(参数)`方法来实现页面跳转操作。 首先，`this.$router.push`是Vue Router提供的编程式导航方法，它能够触发视图的变化。使用`this.$router.push`进行页面跳转...
解决vue.js this.$router.push无效的问题
10-18
Vue Router提供了一个编程式的导航方法——this.$router.push，用于在应用内进行页面跳转。然而，在实际开发过程中，我们可能会遇到this.$router.push无效的问题，导致路由跳转无法正确执行。本文将详细介绍在什么...
vue-router 2.0 跳转之router.push()用法说明
10-14
针对描述中提到的问题，即在 iOS 设备上点击返回键时，路由改变但页面内容不更新，解决方案是利用 Vue Router 的导航守卫。可以在首页组件中添加 `beforeRouteLeave` 钩子，阻止返回到登录页的操作： ```javascript...
vue3.0 router路由跳转传参（router.push）
web18296061989的博客
03-06 896
vue3.0取消了2.0部分api，所以路由跳转传值方式有所不同。 这里主要讲编程式导航，也就是router.push(location, onComplete?, onAbort?) vue3.0新增API：useRouter和useRoute 一.路由跳转 1.首先在需要跳转的页面引入API—useRouter import { useRouter } from 'vue-router' 2.在跳转页面定义router变量 const router = useRouter() 3.用router.
vue里使用$router.push打开新窗口，以及跳转时需要注意的问题
weixin_44296432的博客
08-29 1万+
因为需求中希望从新建页跳转到详情页，而且希望新建页还不会被清空。最后确定修改页面为点击详情打开一个新窗口显示详情页。 在vue中使用 this.$router.push（{ name: 'detail' ,id: id}） 默认是替代本窗口 如果想新开一个窗口，可以使用下面的方式： let routeData = this.$router.resolve({ name: 'Use...
Vue-router的跳转问题
feng_strong的博客
07-13 2502
可以把路由router想象成一个访问记录的栈，router.replace()是替换掉栈顶，而router.push()则是向栈中再堆如一个新记录。 一般情况下，要做前进后退的浏览记录管理的，基本上都是用router.push()，但是也是有一些特殊情况需要用到router.replace。比如，有一个授权页，用户在按流程操作时，某一步需要授权，是直接跳到授权页，授权页提交授权请求，直到成功
this.route.push传参不同跳转页面不刷新问题
CHIHIRO1023的博客
10-08 233
this.route.push传参不同跳转页面不刷新问题
vue router-link 路径变化 页面内容不变
华子的专栏
05-15 1万+
在VUE项目中有碰到过，vue 同一 路由页面 用router-link 或者 router.push（） 访问同一路由页面，出现url地址有变化，但是页面内容没有变化，没有重新加载信息解决方案如下    &lt;router-link  to="/home" @click.native="flushCom"&gt;首页&lt;/router-link&gt;&lt;script&gt;    e...
vue-router参数query改变页面url不改变及不更新数据
高山景行，一尘不染
08-20 1万+
我在工作中发现，路由本身有query参数，但是我点击更新了query，也push了，页面url不改变，这个时候其实用到了对象的拷贝，你需要对query对象做拷贝，对象的拷贝方法如https://blog.csdn.net/lbPro0412/article/details/81258995 代码如下，我才用的对象变字符串再变对象拷贝方法 let query = this.$rou...
vue中this.$router.push()跳转导致页面刷新导航栏active不改变问题解决~！
qq_45332221的博客
07-13 5428
前言 写vue项目中遇到了导航栏绑定的active不改变，路由正常跳转了结果导航栏显示还是第一个。 于是我就开始排错，发现每次路由跳转，导航栏绑定的activeNum都被刷新掉归0了，也就是显示第一个。刚开始确实好久没发现问题，以前也是这么写的没出过问题。 转机 后来我想是不是因为，这个导航栏是在router-view跳转的子组件中的原因，页面跳转的时候将整个子组件都刷新了，表面上看是子组件中的子组件刷新（相当于孙子级别的组件刷新），其实跳转的时候是刷新的整个子组件。 解决 然后我就在子组件的导航栏中cre
vue3 router.push 传参
10-18
在 Vue3 中，使用 router.push 进行路由跳转时，可以通过第二个参数传递参数。例如： ``` this.$router.push({ path: '/home', query: { id: 123 }}) ``` 其中，`query` 对象中的属性会被作为查询参数添加到 URL 中。在目标组件中，可以通过 `$route.query` 访问这些参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值