Vue路由参数更新但是页面不刷新问题

最新推荐文章于 2024-07-09 10:35:29 发布
最新推荐文章于 2024-07-09 10:35:29 发布
阅读量2.8k 收藏 6
点赞数 3
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/120142020
版权
本文介绍了三种解决Vue.js中路由参数更新但页面未刷新问题的方法：1) 使用watch属性监听route对象；2) 在router-view上设置key属性，结合参数值；3) 应用beforeRouteUpdate导航守卫进行更新。
摘要由CSDN通过智能技术生成

解决方法

一、使用watch属性监听route对象

watch: {
   
    $route(to, from) {
   
      if (this.$route.query.id && from.path == "/client/index"
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue遇到的问题五：修改路由参数，不会刷新该页面
GTbond的博客
04-22 4701
1. vue路由，修改某组件的路由参数，不会刷新该组件 需求：在某个组件中，内容由参数发起接口获取，且该组件由上/下翻页效果， 需要改变参数，更新内容 http://localhost:8080/#/module?type=1&id=15 //需要改变id 解决办法： 监听路由 方法一： watch:{ // 路由发生变化页面刷新 '$route' (to, from){ this.$router.go(0); } } //缺点：刷新一次页面，用户体验不好 方法二： // 将函
vue 解决路由只变化参数页面组件不更新问题
10-16
今天小编就为大家分享一篇vue 解决路由只变化参数页面组件不更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router路由组件传参，参数改变，页面不刷新问题
weixin_45150813的博客
05-10 2025
vue路由组件传参，参数改变页面不刷新
Vue3动态路由（响应式带参数的路由）变更页面不刷新的问题
最新发布
笑小枫
07-09 1023
使用带有参数的路由时需要注意的是，当用户从 `/users/johnny` 导航到 `/users/jolyne` 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
解决vue路由跳转同一页面，携带不同参数，页面不刷新的问题
weixin_60196946的博客
08-30 232
简单来说就是我点底部导航时，第一次跳转到详情页没有问题，可是在跳转详情页之后，再去点击底部导航时就会出现参数改变但是页面没有刷新的问题。今天上午在公司碰到了这种路由跳转同一页面的问题，在你跳转到的页面里添加监听方法。
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决VUE路由query或params参数更新变化但是组件页面数据不刷新问题
china-quanda
04-21 7933
出现这种情况是因为依赖路由的query或params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 > 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是第一次进入的数据。
vue路由参数发生变化，但是页面不刷新的问题（vue监听路由参数变化重新渲染页面）
github_38928905的博客
03-14 9583
例： 地址1："https://xxx/#/autoPage?channelCode=xuezhiyuan_jc111" 地址2："https://xxx/#/autoPage?channelCode=xuezhiyuan_jc222" 问题现象：当从第一个调到第二个地址时，页面内容不进行刷新，依然停留在地址1的内容，但是地址栏会变化为地址二。 解决方式：vue 的key htt...
vue路由参数变化，页面不刷新问题
lucky2_的博客
03-18 303
问题记录：在app.vue中添加如下代码 <router-view :key="key" /> computed: { key() { return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date(); } }
vue路由传参页面刷新参数丢失问题解决方案
10-16
总的来说，面对页面刷新导致的参数丢失问题，Vue开发者应根据实际需求选择合适的方法。无论是使用Vue Router的Query传参，还是结合浏览器的本地存储，关键在于理解各种方法的适用场景，并灵活运用。在开发过程中，...
详解解决Vue相同路由参数不同不会刷新的问题
12-29
通常情况下我们喜欢设置keepAlive...同时在created 中触发请求，在路由参数不同的情况下并不会执行对应的操作。 解决方法： 1、给 router-view 设置 key 属性为路由的完整路径 $route.fullPath> 这种方法我觉得应该
vue 路由参数变化，页面不更新的问题
weixin_33948416的博客
03-26 266
监控$route 在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，如果不监听路由参数值的变化，页面无数据刷新，需手动刷新浏览器，这样做就不是我们的预期效果。 举例：当前路由为 /pjthome?pjtid=123456 mounted: function () { this.pjtid = this.$route.query.pjtid th...
vue 刷新页面_vue-router路由复用后页面没有刷新
weixin_39890289的博客
12-13 1438
vue-router提供了页面路由功能，可以用来构建单页面应用，在使用vue-router的动态路由匹配的时候，遇到了url变化了，但是页面却没有任何动静的问题，记录一下。动态路由匹配url变化了，但是组件没有变化是因为vue进行了组件复用，因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。所以我们需要手动进行数据刷新。我们可以简单的使...
Vue路由变化，页面数据不刷新
Ravings_now的博客
03-22 2680
今天怒写一篇，各种姿势百度，改了一天，结果看vue官方文档解决问题。就改了几行代码！！！ 该demo原码放在github上，不断更新修改。demo组成：Vue2.x(cli3) + express + mongodb，有兴趣的小伙伴可以去看看，可以留下star哦，笔芯 github：https://github.com/ravings/graduation-project 首先，展示问题：V...
vue 改变路由（URL）参数不刷新页面
ingenuou_的博客
09-22 2147
vue 改变路由（URL）参数不刷新页面
路由变化，页面不刷新问题
Mr. Ding的小博客
01-11 422
给app.vue 加个key，用watch监听$route变化 <template> <div id="app" :key="key"> <keep-alive> <router-view /> </keep-alive> </div> </template> <script> export default { name: "app", components.
Vue 跳转相同路由不同参数，解决页面数据不自动刷新
热门推荐
_夜渐凉
02-01 1万+
vue-router 是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是应该是路径之间的切换，也就是组件的切换 因此，如果需要跳转相同路由不同参数时，必须确保组件需要重新被渲染 ...
vue 同一个页面地址栏参数改变，页面不刷新的解决方案
aichimaodeyuybh的博客
08-12 2008
在vue项目开发中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。监听地址栏变化（watch），这是vue-router官方给出的解决办法。监听路由变化，把初始化的方法重新写到监听的方法里面执行。
vue 同路由携带不同参数跳转无法刷新问题解决方法
m0_54070657的博客
11-28 3628
当跳转同一路由，携带不同参数时，组件会被复用，生命周期之前创建了一次，不会再次重新创建，因此页面不会刷新。方法三：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数，在路由配置中使用。监听路由参数的变化，并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。守卫，该守卫会在当前路由更新时被调用，可以在守卫中执行刷新页面的逻辑。属性给组件添加唯一标识，当路由参数发生变化时，通过修改。中，在需要刷新页面时，通过修改参数的值来触发刷新。来管理路由参数，在每次路由跳转时将参数存储到。方法四：可以考虑使用。
vue 路由参数刷新不丢失的方法
03-27
可以使用 HTML5 的 history 模式来解决 Vue 路由参数刷新不丢失的问题。在 Vue 的路由配置中，设置 mode 为 history，即可启用 history 模式。 具体配置方法如下： ```javascript const router = new VueRouter({ mode: 'history', routes: [ // 路由配置 ] }) ``` 在将 Vue 打包成生产环境时，需要在服务器端进行一些配置，以确保页面刷新时不会出现 404 错误。具体配置方法可以参考 Vue 官方文档：[HTML5 History 模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html#html5-history-%E6%A8%A1%E5%BC%8F)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值