页面获取不到this.$route.query传参

最新推荐文章于 2023-10-18 15:58:57 发布
最新推荐文章于 2023-10-18 15:58:57 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端技能进阶 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56976301/article/details/126723603
版权

vue2项目中点击按钮带参数跳转到指定页面

 目标页面获取  this.input=this.$route.query.searchName

出现问题：

第一次跳转正常，返回上一页后再次跳转，目标页可以获取到新的searchName的值，但页面无法同步展示，需要手动刷新后页面才能显示新的searchName的值。

页面展示上一次跳转后的值：

 

解决方法：目标页使用watch

 欢迎大家提出问题！

七号程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的获取参数方式 this.$route.params和this.$route.query的区别
YMB_jack的博客
03-27 2239
Vue: this.$route.params和this.$route.query的区别 this.$route.params接收路由参数形式 router/index.js 提前定义路由 { path:'/mtindex', component: mtindex, //添加路由 children:[ { path:"/detail:tableId(\\d+)", // 如果是在 url 后面带参数 就是 加上 :参数名称(\\d.
vue.js this.$router.push获取不到params参数问题
11-20
主要通过两种方式传参 1.query方式传参和接受参数 this.$router.push({ path:'/xxx' query:{ idname:id } }) 接收的方式：this.$route.query.id 2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式：this.$route.params.id 代码 this.$router.push({ path: '/container', params: { url: this.func.u
this.$route.query一直取不到
weixin_39897287的博客
11-25 1万+
在APP.vue里面 mounted里面（最前面） console.log(this.$route.query.source)第一次代码运行完成后能打印值， 后面刷新页面一直打印不了，也存了缓存 但是打印不出来，后来找到原因是 route.js并没有执行完毕console就打印出来了， 所以 this.$router.onReady(() => { i...
this.$route.query获取不到参数信息
小菜鸡码农的博客
10-18 1483
this.$route.query获取不到参数信息
this.$route.query 获取不到值
LoveMyTail的博客
12-08 7349
具体情况是这样的，在当前的导航栏页面中，我可以获取到由登陆页面传过来的username mounted () { this.username = this.$route.query.username console.log("接收到的username："+this.username) // 正常输出 } 当我点击导航栏从而切换页面时，我想把这个username传到其它页面上去 handleSelect(key, keyPath){ console.log(this.us
router路由跳转使用query传递参数刷新后数据无法获取
lindali1115的博客
04-24 4453
代码示例 路由跳转代码 if (data.code === 200) { this.$router.push({ name: 'admin/', query:{ accountInfo:data.data, } }) } 获取参数,初次载入 console.log(this.$route.quer...
vue router 传参获取不到的解决方式
10-15
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iframe父页面获取子页面参数的方法
12-10
在Web开发中，有时我们需要在父页面中操作或者获取嵌入的`iframe`子页面中的数据，例如在一些复杂的交互式应用或者多层框架结构的网页中。标题和描述所提及的是一个具体示例，展示了如何从父页面获取`iframe`子页面...
浅析vue-router jquery和params传参(接收参数)$router $route的区别
12-11
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！ this.$router 和this.$route有何区别？ 在控制台打印两者可以很明显的看出两者的一些区别： 1.$router为VueRouter实例，想要导航到不
详解新手使用vue-router传参时注意事项
12-09
在目标组件中，我们可以通过`this.$route.params`来获取这些参数： ```javascript console.log(this.$route.params.id) // 233 ``` 但是，当页面刷新后，由于浏览器URL不包含`params`中的参数，`params`会被...
关于vue router 传参获取不到问题
热门推荐
lzcwds的博客
08-17 2万+
在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(...
vue router路由query传参刷新后数据无法获取
m0_37210775的博客
10-26 1383
vue router路由query传参刷新后数据无法获取
学习ant design vue 几个页面
qq_40230608的博客
09-22 695
1.登录页面 页面内用到的知识点： 2.导航栏页面 3，表格页面（数据展示页面） 4.数据分析页面的设计（页面亮点） 5.系统设置页面
vue router 路由跳转获取不到参数
qq1154479896的博客
06-13 5127
问题： 路由传参一直不能获取到参数, 未出现报错 原因： 混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path 方法 代码： 错误写法 ... this.$router.push({ path: '/HealthDetectionChildNav', params: { title: item['name'], actionList: item['actionList'] }
解决uni-app小程序获取路由及路由参数
Summer_JK的博客
07-19 8145
代码】解决uni-app小程序获取路由及路由参数。
APP.vue获取this.$route问题
zwbHUST的博客
09-02 3284
在项目中偶然间遇到了这样的问题，routes注册设置的时候使用了懒加载的方式，如下： routes: [ { path: '/', name: 'index', // component: index //方式1 component: () => import('./views/index.vue'); //方式2 }, ... ] 如果是这种方式（方式2），那么在app.vue中你如果先要在 created 或者
VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失
NidhoogJX的博客
12-14 1949
route.query刷新获取不到的问题
vue query 路由传参，页面刷新数据丢失，页面加载不出来
qq_43578935的博客
08-26 9173
vue query路由传参，页面刷新数据丢失，通过localstorage存储数据，实现页面正常使用
vue的this.$router.push()传参方法
最新发布
06-01
在Vue中，我们可以使用this.$router.push()方法进行路由跳转。如果我们需要传递参数，则可以在push()方法的第二个参数中传递一个对象，该对象中包含需要传递的参数。例如： ``` this.$router.push({ path: '/example', query: { id: '123' }}) ``` 上述代码中，我们传递了一个对象作为第二个参数，该对象包含path和query两个属性。其中，path表示需要跳转到的路由路径，query表示需要传递的参数，以键值对的形式存储。 在接收参数的组件中，我们可以通过this.$route.query来获取传递过来的参数。例如： ``` mounted () { console.log(this.$route.query.id) // 输出123 } ``` 注意：如果需要传递的参数较多，建议使用params进行传参，而不是query。因为params可以在url中进行显示，而query则不会。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值