vue3使用router.push()页面跳转后，该页面不刷新问题

最新推荐文章于 2025-06-20 21:46:53 发布

迷小圈

最新推荐文章于 2025-06-20 21:46:53 发布

阅读量1.1w

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wang13679201813/article/details/133087715

文章讲述了在Vue应用中，使用`push`方法可能导致重复路由不刷新的问题。解决方案是通过添加`params`参数并在目标页面使用`watch`监视路由变化，确保每次跳转都执行刷新操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

原因分析
最优解决

原因分析

这是一个常见问题，当使用push的时候，会向history栈添加一个新记录，这个时候，再添加一个完全相同的路由时，就不会再次刷新了

最优解决

在页面跳转时加上params参数时间

router.push({
   path: '/index',
   query: {
     date: new Date().getTime(),
   },
 })

在跳转到的页面，添加watch监视

import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
watch(route, (to, from) => {
  router.go(0)
})

完美解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

迷小圈

关注关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

通过this.$router.push跳转同一路由页面只会刷新一次的问题怎么解决

韩旭不会敲代码吧的博客

04-25

2378

通过this.$router.push跳转同一路由页面只会刷新一次的问题怎么解决

vue-router 2.0 跳转之router.push()用法说明

10-14

针对描述中提到的问题，即在 iOS 设备上点击返回键时，路由改变但页面内容不更新，解决方案是利用 Vue Router 的导航守卫。可以在首页组件中添加 `beforeRouteLeave` 钩子，阻止返回到登录页的操作： ```javascript...

1 条评论您还未登录，请先登录后发表或查看评论

vue $router.push 跳转到当前页面地址栏变但是数据不刷新

qq_26241443的博客

03-30

3030

vue-router跳转页面时，如果name和当前页面的name一样，只是query的参数不一样，那么会导致页面内容不刷新，因为页面内容是在created中根据route中的参数来获取的，但是跳转当前页面不会出发created。

VUE this.$router.push跳转页面传值不同 created 函数只调用一次页面不刷新解决办法

alokka的博客

07-09

7750

问题：在vue中使用 this.$router.push() 方法，如果只是传入的参数不同，会出现 url 地址变化了，但是页面没有重新请求数据，生命周期函数未调用，需要刷新一下页面才有新的数据加载。原因：由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行

VUE3 路由的跳转方法

最新发布

HarryHY的博客

06-20

585

params参数适合新闻or展示类的组件在分页或者主页获取到文章ID或者详情ID 跳转到详情页拿到ID请求整个详情页面的数据接口。query参数适合修改详情页面在分页中拿到该数据所有的参数带到详情页面将修改页面的初始值替换成具体参数。自动导入vue、vuerouter中的函数和方法。name属性对应了路由文件配置的name。path属性对应了路由的路径。

vue $router.push跳转同页面只是参数不同。但是页面数据不刷新的解决办法（图文版）

weixin_45721912的博客

05-16

1388

【代码】vue $router.push跳转同页面只是参数不同。但是页面数据不刷新的解决办法（图文版）

vue-router3.0版本中 router.push 不能刷新页面的问题

11-30

在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。我看了一下 package.json，我的 vue 和 axios 是没有写版本号，但 vue-router 明明写了版本号，怎么可能以前行的，现在就不行了呢？然后，我使用 npm view vue-router 查看后才发现使用的

Vue3路由不及时刷新问题解决

qq_57490170的博客

08-20

1128

记录日常bug

【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)

RanDoll_的博客

05-22

8867

首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。

vue3新增列表，跳转路由列表不刷新问题

m0_73504190的博客

05-12

1050

情景：在列表页点击新增，通过路由跳转到另一个页面，提交数据后返回列表页，刷新页面。问题：因为vue单页面应用的特点，有缓存，所以不会自动刷新。

解决vue3中两个路由共用一套代码，两个页面之间跳转不刷新

九段刀客的博客

05-12

1852

<template> <div>=={{ name }}</div> </template> <script setup> import { ref, watch } from "vue"; import { useRouter } from "vue-router"; const name = ref(""); const router = useRouter(); watch( () => router.currentRout

Vue this.$router.push(参数)实现页面跳转操作

10-14

在使用`this.$router.push`进行页面跳转时，有可能遇到无法跳转的问题。例如，在使用`import map from '@/components/map'`静态引入时，可能会出现路径解析错误。为了解决这个问题，可以改变引入方式为： ```...

解决vue.js this.$router.push无效的问题

10-18

Vue Router提供了一个编程式的导航方法——this.$router.push，用于在应用内进行页面跳转。然而，在实际开发过程中，我们可能会遇到this.$router.push无效的问题，导致路由跳转无法正确执行。本文将详细介绍在什么...

解决vue3项目跳转同一页面数据不刷新的问题

qq_44313787的博客

05-06

8800

原因：router-view使用了keep-alive组件，会被缓存，而vue-router的切换不用于传统的页面切换。是路由之间的切换，组件之间的切换，引用相同组件的时候，会被直接调用缓存里面的而不会调用created()，onMoun ted()函数。如图所示：要实现的功能是点击每一个tabs栏下的更多按钮，会跳转到“消息中心”页面，这是点击不用的“更多”按钮，跳转的路由页面是同一个，但是要求页面里的消息类型下拉选择框和列表数据要刷新，显示不同的数据。现在的问题是：页面跳转数据不刷新。

router.push不刷新（8种解决方案）

热门推荐

leveretz的博客

11-13

1万+

router.push不刷新（8种解决方案）

Vue使用 vue-router路由跳转页面数据未更新

MaoObject的博客

01-08

1257

vue-router的切换不同于传统的页面切换，而是路由之间的切换，其实就是组件之间的切换，引用相同组件的时候，会直接调用缓存而不会调用created()，mounted()函数。由于 vue-router 使用了 keep-alive组件，被缓存了。需要注意以上两种方式需要和methods同级。

Vue3.0 路由跳转页面不刷新

sunon_的博客

05-01

4057

遇到的问题是，从表单页提交跳转到列表的时候没有刷新页面，导致刚提交的数据没有及时显示在列表当中，使用监听方法主动刷新列表数据 import { ref, reactive,watch } from "vue"; export default { name: "basetable", setup() { .... //监听，当路由发生变化时刷新页面，解决路由跳转不刷新的问题 watch(router.currentRou

vue3 三级路由跳转成功但页面未刷新

weixin_43957246的博客

07-10

1419

在网上一番搜索后，发现是二级路由和三级路由共用了router-view导致的。（排查时可以试着在二级路由的组件里加上看看三级路由的组件会不会正常显示，如果可以的话大概率也是这个问题）在实现二级路由跳转到三级路由（菜单列表 -> 新增菜单页）时，会出现地址栏正确变动，但实际页面停留在菜单列表页并未改变的情况。需要注意的是 render h 在vue2和vue3里的用法不一样。

vue3动态路由刷新失效解决方案

m0_50360903的博客

01-30

2368

原因：在做vue3后台管理系统的时候，由于路由是从后端获取到的，然后如果没有刷新页面的情况，页面正常跳转也没有问题，但是刷新页面的时候，，在控制台输出的话路由确实存在的，在百度找了很多解决方案，但是没有效果，下面是通过我自己的解决方案，希望能够帮助到大家。

vue3 router.push页面跳转加载两次

03-15

<think>嗯，用户的问题是Vue3中使用router.push跳转页面时，页面加载了两次。我需要先理解为什么会发生这种情况，然后找到解决方案。根据他们提供的引用，可能有多种原因。首先，引用[3]和[4]提到页面数据没有自动刷新，需要手动刷新，这可能和组件没有正确响应路由参数变化有关。但用户的问题是关于加载两次，这可能和导航守卫或组件生命周期有关。接下来，引用[5]提到在Vue3中使用router.push跳转后生命周期钩子没有执行，导致数据不加载。但用户的情况相反，是加载了两次。这可能是由于某些地方重复触发了路由跳转，或者组件被多次挂载。可能的原因包括：导航守卫中的重复触发、组件内的重复调用（比如在created或mounted中调用了两次）、路由配置的问题（比如重复的路由记录）、或者Vue Router本身的特性（比如在严格模式下，同一路由多次跳转会报错，但用户可能没有正确处理错误，导致重试）。解决方案方面，引用[1]提到捕获NavigationDuplicated错误，避免重复导航。这可能是一个因素，如果用户没有处理这个错误，可能会导致重复跳转尝试。另外，检查组件内的代码，比如是否在生命周期钩子中多次调用router.push，或者是否在事件处理函数中多次触发跳转。另外，检查路由配置是否有重复的路由定义，或者在跳转时是否不小心调用了两次router.push。还有可能在Vue3的组合式API中，setup函数可能被多次执行，导致副作用重复。可能还需要检查是否有全局的路由守卫（如beforeEach）中进行了重定向或其他操作，导致多次跳转。此外，如果用户使用了keep-alive，可能会导致组件被缓存，从而在某些情况下触发多次加载。总结可能的解决步骤：首先检查代码中是否存在重复的router.push调用，或者事件处理函数被多次绑定；然后处理NavigationDuplicated错误；接着检查路由配置和导航守卫；最后考虑组件生命周期和缓存的影响。</think>在Vue3中，使用`router.push`导致页面加载两次的常见原因及解决方案如下： ### 一、原因分析 1. **重复导航触发** 当连续快速点击触发路由跳转时，Vue Router会抛出`NavigationDuplicated`错误[^1]。若未正确处理该错误，可能导致路由重复执行跳转动作。 2. **组件生命周期副作用** 在`onMounted`或`setup`中未正确清理副作用（如事件监听），可能导致路由跳转逻辑被多次绑定[^5]。 3. **路由配置冲突** 使用`redirect`或`alias`的路由配置可能造成路由解析异常，导致重复跳转。 4. **严格模式下的路径匹配** 若路由路径配置缺少结尾斜杠（如`/path`与`/path/`），在严格模式下可能被识别为两个不同路径。 ### 二、解决方案 #### 1. 拦截重复导航错误 ```typescript // 统一处理导航重复错误 router.push('/target').catch(err => { if (!isNavigationFailure(err, NavigationFailureType.duplicated)) { console.warn("重复导航已拦截:", err); } }); ``` #### 2. 优化组件生命周期 ```vue <script setup> import { onBeforeUnmount } from 'vue'; // 使用防抖控制跳转频率 let timer; const handleClick = () => { clearTimeout(timer); timer = setTimeout(() => router.push('/target'), 300); }; onBeforeUnmount(() => clearTimeout(timer)); </script> ``` #### 3. 规范路由配置 ```typescript // router.ts const routes = [{ path: '/detail/:id', component: DetailPage, props: true, // 启用参数自动传递 meta: { reuse: false } // 强制重新创建组件 }]; ``` #### 4. 强制刷新组件 ```typescript // 通过v-if强制重建组件 <router-view v-slot="{ Component }"> <component :is="Component" v-if="isRouterAlive" /> </router-view> // 在需要刷新的地方 const isRouterAlive = ref(true); const reload = () => { isRouterAlive.value = false; nextTick(() => isRouterAlive.value = true); } ``` ### 三、进阶调试技巧 1. **路由事件监听** 添加全局导航监听定位重复触发点： ```typescript router.afterEach((to, from) => { console.log(`[ROUTE] ${from.path} -> ${to.path}`); }); ``` 2. **性能分析** 通过Chrome DevTools的Performance面板录制路由跳转过程，检查是否存在重复的组件挂载（mount）操作。