vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题

最新推荐文章于 2025-05-28 14:50:58 发布
原创 最新推荐文章于 2025-05-28 14:50:58 发布 · 1.7w 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-router #页面不刷新

当Vue-router中同一页面的URL参数发生变化时，如文章的发布与编辑在同一页面，不会触发组件的created或mounted钩子，导致数据无法更新。本文介绍两种解决方案：一是监听路由变化并重新执行初始化方法；二是为router-view添加唯一key，确保每次路由变化时组件都能重新渲染。

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

vue-router  同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。

解决办法有两种：

1：监听地址栏变化（watch）,这是vue-router官方给出的解决办法。

监听路由变化，把初始化的方法重新写到监听的方法里面执行

2、给router-view加个唯一的key，来保证路由切换时都会重新渲染触发钩子了

个人更倾向于第二种简单省事，第一种要是有多个页面共用，就要多次写监听

Vue3 - 路由 Vue-router 4.X（配置与使用教程）
前端开发大师鸭
11-30 5071
vue3路由官方文档，vue3路由文档，vue-router4官方文档，使用Vite构建Vue3项目,对路由VueRouter，Vue3中VueRouter4路由的配置，vue3-vueRouterv4.x，vue3中vue-router4基本使用(路由基本配置)，Vue3-Router@4.x使用，vue-router4.x教程，Vue3中基于vue-router4的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3)，10分钟快速上手VueR
详解解决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-router 同一个页面地址栏参数改变，页面不刷新的问题
愤怒的阿木木的博客
04-22 2006
记录一下做项目中遇到vue-router 同一个页面地址栏参数改变，页面不刷新的问题 制作搜索功能需要改变路由参数而不改变路由地址重新请求数据，解决方法如下 监听地址栏变化（watch）,这是vue-router官方给出的解决办法。 监听路由变化，把初始化的方法重新写到监听的方法里面执行 watch: { '$route' (to, from) { this.search(this.$route.query.keywords) } }, ...
vue3 控制url更新但不让页面更新
最新发布
秋来九月八
05-28 490
vue3 控制url变更，但不让页面刷新，并且不使用keep-alive
vue路由传值，修改地址栏参数而不刷新页面
qq_57052578的博客
09-23 3284
vue路由传值，修改地址栏参数而不刷新页面
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题
热门推荐
qq_39182029的博客
05-13 1万+
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题 问题原因： vue路由切换实际是组件间的切换，在我的详情页中，钩子方法使用的是created()方法，在不强制刷新或者重启时只会创建一次，所以引用相同组件的时候，页面数据就无法刷新。 我的解决方法： 方法1.在详情页添加一个watch监听路由变化（不推荐，每次返回时会刷新一次列表数据，用户体验不好） watch：{ '$route' (to,from){ this.$router.go(0); } } ​
vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题
晨曦的博客
08-25 2875
vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。 解决办法有两种： 1：监听地址栏变化（watch）,这是vue-router官方给出的解决办法。 监听路由变化，把初始化的方法重新写到监听的方法里面执行 watch: { '$route' (to, from) { this.getData(this.$route.query.id) } } metho.
解决vue router组件状态刷新消失的问题
12-09
在开发基于Vue.js的单页应用（SPA）时，经常遇到的一个问题是，用户登录后通过Vue Router跳转到主页面，但当用户刷新页面时，登录状态和相关信息丢失。这是因为浏览器刷新页面时，路由参数、Vuex状态等不会被保留。...
vue router带参数页面刷新或回退参数消失的解决方法
10-17
在使用Vue Router进行页面间传递参数时，经常会遇到参数在页面刷新或者浏览器后退时消失的问题。本文将详细介绍如何在Vue Router中带参数进行页面跳转，并解决刷新或回退时参数消失的问题。 首先，了解在Vue Router...
解决vue 路由变化页面数据不刷新的问题
08-27
然而，有时可能会遇到一个问题：当路由发生变化时，页面数据并未自动刷新。这种情况可能会影响用户体验，尤其是当你期望新路由加载时更新相应的数据。本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题...
vue-router 路由详解
大学生小郑的博客
07-21 1455
vue-router 路由详解
vue $router.push跳转同页面只是参数不同。但是页面数据不刷新的解决办法（图文版）
weixin_45721912的博客
05-16 1367
【代码】vue $router.push跳转同页面只是参数不同。但是页面数据不刷新的解决办法（图文版）
vue 同路由携带不同参数跳转无法刷新问题解决方法
m0_54070657的博客
11-28 4380
当跳转同一路由，携带不同参数时，组件会被复用，生命周期之前创建了一次，不会再次重新创建，因此页面不会刷新。方法三：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数，在路由配置中使用。监听路由参数的变化，并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。守卫，该守卫会在当前路由更新时被调用，可以在守卫中执行刷新页面的逻辑。属性给组件添加唯一标识，当路由参数发生变化时，通过修改。中，在需要刷新页面时，通过修改参数的值来触发刷新。来管理路由参数，在每次路由跳转时将参数存储到。方法四：可以考虑使用。
vue 同一个页面地址栏参数改变，页面不刷新的解决方案
aichimaodeyuybh的博客
08-12 2280
在vue项目开发中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。监听地址栏变化（watch），这是vue-router官方给出的解决办法。监听路由变化，把初始化的方法重新写到监听的方法里面执行。
vue 改变路由（URL）参数不刷新页面
ingenuou_的博客
09-22 2554
vue 改变路由（URL）参数不刷新页面
解决VUE路由query或params参数更新变化但是组件页面数据不刷新问题
china-quanda
04-21 8814
出现这种情况是因为依赖路由的query或params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 > 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是第一次进入的数据。
vue $router.push 跳转到当前页面 地址栏变但是数据不刷新
qq_26241443的博客
03-30 3024
vue-router跳转页面时，如果name和当前页面的name一样，只是query的参数不一样，那么会导致页面内容不刷新，因为页面内容是在created中根据route中的参数来获取的，但是跳转当前页面不会出发created。
解决 Vue 页面中地址栏参数变更不刷新的问题
~
08-03 1517
在一次Vue项目开发中，遇到了只改变路由中的参数，路由地址不改变页面数据不刷新的问题。造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。
Vue路由还不会？别急看完这篇文章就会了
sobject的博客
03-06 471
前言 Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 history 模式或 hash 模式 可定制的滚动行为 URL 的正确编码 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue3 路由？ ...
Vue-router详解：组件导航与地址规则实战
在传统的网页应用中，页面间的切换主要依赖于超链接，而在单页面应用中，路由则扮演了导航的角色，它定义了一组地址规则，根据用户在浏览器地址栏的输入或历史记录来决定渲染哪个组件。 vue-router的工作原理是通过...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值