vue-router路由组件传参，参数改变，页面不刷新问题

最新推荐文章于 2024-05-09 09:09:41 发布
最新推荐文章于 2024-05-09 09:09:41 发布
阅读量2k 收藏 1
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45150813/article/details/130596625
版权

一、问题场景

用多个子路由指向同一个页面，通过props进行传参，并且依据参数不同请求不同的数据，实际开发中发现，参数改变后，页面不刷新
在这里插入图片描述

二、解决办法

key要具有唯一性，一般路由中name属性是唯一的，因此key这边使用的是name
vue3中的路由解决办法：
在这里插入图片描述
vue2路由解决办法
在这里插入图片描述

三、扩展

路由组件传参，如何在页面中接受？
在页面定义props，其中props的参数（searchKey）与上面路由文件中的props的参数（searchKey）必须一致
在这里插入图片描述

不想掉头发啊！！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue路由参数更新但是页面不刷新问题
小柠檬爱编程
09-06 2768
解决方法 一、使用watch属性监听route对象 watch: { $route(to, from) { if (this.$route.query.id && from.path == "/client/index") { this.getAllTypeList(); }, // 对路由变化作出响应... //可以使用$router.go(0)进行刷新,（补充，该方法在ios手机上无效） //可以改用wind
vue-router参数变化更新页面问题
muyifengse的博客
12-10 2123
vue-router参数变化更新页面问题 我们在做项目的过程中经常会用到路由的模式匹配，例如对于不同的用户所使用的组件相同，我们不必为每个用户设置一个路径。此时，动态路径参数就能帮助我们达到这个效果。 相信下面的代码你一定见过 const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id'...
vue 同路由携带不同参数跳转无法刷新问题解决方法
m0_54070657的博客
11-28 3551
当跳转同一路由，携带不同参数时，组件会被复用，生命周期之前创建了一次，不会再次重新创建，因此页面不会刷新。方法三：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数，在路由配置中使用。监听路由参数的变化，并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。守卫，该守卫会在当前路由更新时被调用，可以在守卫中执行刷新页面的逻辑。属性给组件添加唯一标识，当路由参数发生变化时，通过修改。中，在需要刷新页面时，通过修改参数的值来触发刷新。来管理路由参数，在每次路由跳转时将参数存储到。方法四：可以考虑使用。
vue路由传值，修改地址栏参数而不刷新页面
qq_57052578的博客
09-23 2543
vue路由传值，修改地址栏参数而不刷新页面
解决新增或者编辑后vueRouter跳转不刷新页面的问题
最新发布
qq_45160662的博客
05-09 454
【代码】解决新增或者编辑后vueRouter跳转不刷新页面的问题。
解决VUE路由query或params参数更新变化但是组件页面数据不刷新问题
china-quanda
04-21 7849
出现这种情况是因为依赖路由的query或params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 > 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是第一次进入的数据。
vue 同一个页面地址栏参数改变，页面不刷新的解决方案
aichimaodeyuybh的博客
08-12 1910
在vue项目开发中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。监听地址栏变化（watch），这是vue-router官方给出的解决办法。监听路由变化，把初始化的方法重新写到监听的方法里面执行。
Vue数据更新，页面却没有更新的几种情况及解决方法
热门推荐
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
导致VUE页面不刷新的几种情况以及解决方法
qq_30258721的博客
08-30 6757
参考文献 https://segmentfault.com/a/1190000022772025 1.Vue 无法检测实例被创建时不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 场景： var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{
react 动态修改路由_React 路由参数改变页面不刷新问题
weixin_39758953的博客
12-19 2505
最近写的项目遇到遇到关于react路由的问题，原项目中，查找的时候获取文本框上的值并跳转到查找结果页面，在componentDidMount函数中获取路由上的关键字，向其他组件传递参数keywords，向后台查询结果并返回。在重新查询的过程中，发现虽然路由上的参数已经改变，然而页面上的查找结果并没有更新。原代码：//定义变量state={key:""}//获取值componentDidMount(...
vue路由传参页面刷新参数丢失问题解决方案
10-16
在Vue.js应用中，路由传参是一种常见的功能，用于在不同组件之间传递数据。然而，当页面被刷新时，通过`params`或`route`属性配置传递的参数可能会丢失，这是一个常见的问题。本文将详细讲解这个问题以及如何解决。 ...
vue-router传递参数的几种方式实例详解
10-17
Vue Router 是 Vue.js 应用中的核心组件，用于管理应用的路由。在 Vue Router 中，传递参数主要有两种方式：编程式导航（通过 `router.push`）和声明式导航（使用 `<router-link>`）。下面我们将详细讲解这两种方式...
详解新手使用vue-router传参时注意事项
12-09
在Vue.js应用中，路由管理是非常重要的一部分，Vue Router作为官方推荐的路由库，提供了丰富的功能，包括参数传递。本文将详细讲解新手在使用vue-router进行参数传递时需要注意的事项，主要关注两种常见的方式：使用...
关于vue路由跳转后的页面不会刷新的解决办法
qq_51632935的博客
10-11 1万+
关于vue路由跳转后的页面不会刷新的解决办法
Vue数据更新页面却没有更新的几种情况以及解决方法
jyf_568的博客
11-01 6329
情况一：Vue无法检测实例被创建时不存在于data中的变量 原因：由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化，所以 变量必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 例如： 1 2 3 4 5 new Vue({ data:{}, template: '<div>{{message}}&l...
解决vue路由传参跳转，界面不刷新的问题
weixin_44378370的博客
04-13 899
解决方法：在 router-view 中加 :key=“$route.fullPath”
Vue 跳转相同路由不同参数，解决页面数据不自动刷新
_夜渐凉
02-01 1万+
vue-router 是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是应该是路径之间的切换，也就是组件的切换 因此，如果需要跳转相同路由不同参数时，必须确保组件需要重新被渲染 ...
vue路由参数发生变化，但是页面不刷新的问题（vue监听路由参数变化重新渲染页面）
github_38928905的博客
03-14 9573
例： 地址1："https://xxx/#/autoPage?channelCode=xuezhiyuan_jc111" 地址2："https://xxx/#/autoPage?channelCode=xuezhiyuan_jc222" 问题现象：当从第一个调到第二个地址时，页面内容不进行刷新，依然停留在地址1的内容，但是地址栏会变化为地址二。 解决方式：vue 的key htt...
如何解决Vue Router 中使用 params 传参，页面刷新参数丢失的问题
07-12
在Vue Router中使用params传参时，页面刷新参数丢失的问题可以通过以下几种方式来解决： 1. 使用query参数代替params参数：将参数传递给路由时，可以考虑使用query参数而不是params参数。query参数会以查询字符串的形式出现在URL中，刷新页面时参数不会丢失。例如，将参数传递给路由时，可以使用`this.$router.push({ path: '/example', query: { id: 123 } })`，然后在目标组件中使用`this.$route.query.id`来获取参数值。 2. 使用localStorage或sessionStorage进行数据持久化：将参数保存在localStorage或sessionStorage中，在组件加载时从存储中获取参数值。这样即使页面刷新，参数仍然可以从存储中恢复。例如，在路由导航守卫中，可以将参数保存到localStorage中：`localStorage.setItem('id', id)`，然后在组件加载时，从localStorage中读取参数：`const id = localStorage.getItem('id')`。 3. 使用Vuex进行数据管理：将参数保存在Vuex的状态管理中，在组件之间共享参数值。这样即使页面刷新，参数仍然可以从Vuex中获取。例如，在某个组件中将参数保存到Vuex的state中：`this.$store.commit('saveId', id)`，然后在其他组件中通过`this.$store.state.id`来获取参数值。 4. 使用路由解析函数：在Vue Router中定义一个解析函数，用于从URL中提取参数值，并在组件加载时调用该函数进行参数解析。这样即使页面刷新，解析函数仍然可以从URL中提取参数值。具体实现可以参考Vue Router的官方文档中的"Advanced Matching Patterns"一节。 以上是几种常见的解决方式，您可以根据具体需求选择适合的方法。希望对您有帮助！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值