vue3.0路由传值无法获取值

最新推荐文章于 2024-05-07 17:40:35 发布
最新推荐文章于 2024-05-07 17:40:35 发布
阅读量689 收藏 11
点赞数 8
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongtianzhixue/article/details/135692009
版权

vue3.0路由传值无法获取值

问题

vue-router的push传参，接受参数的地方一直报TypeError: Cannot read properties of undefined。

router.push({
        path:'/Edit',
        query:{
            id:value
        },
    })
router.push({
        path:'/Edit',
        params:{
            id:value
        },
    })

解决

找了半天原来是要有以下结构,需要加上currentRoute.value.才能获取到query和params。

console.log(router.currentRoute.value.query)
console.log(router.currentRoute.value.params)
冬天之雪
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3.0接收路由传递的参数
Sb1784591708的博客
02-19 1393
引入useRouter//useRouter是全局的路由对象。
vue2导航根据路由传值,而改变导航内容的实例
08-28
下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3 使用router，params传参为空，怎么办？
weixin_45288172的博客
04-03 4434
我们使用param传参在新页面无法获取数据。可以有其他解决办法：
vue3路由传参获取不到params，获取到为空
liuzaixi的博客
08-17 3582
注意：从Vue Router的2022-8-22 更新后，我们使用param传参在新页面无法获取数据。
vue3，父组件通过props传递异步数据，子组件接收不到问题
shsyzhzhgn的博客
04-23 897
在父子组件传值时会遇到传的值是异步请求的数据，从而可能导致一些问题。父组件中发起请求拿到数据，将数据传给子组件，子组件onMounted生命周期却接收不到值（或者说只接收了父组件定义的初始值）。 主要是因为父子组件的生命周期：思路很简单，就是初始还没获取到异步数据的时候，不让组件渲染，等拿到的时候再渲染组件。通过v-if控制子组件渲染，等拿到数据的时子组件就会渲染。可以认为是改变了父子组件的生命周期。但是这种方式有一个小问题，就是最终效果会显得子组件有些延迟才出现效果。因为异步数据是从后端的接口获取的，如
关于vue3在ts文件中使用vue-router的问题
最新发布
lth002的博客
05-07 302
在ts文件中，使用了useRouter来进行页面跳转，但是结果却是undifend根本原因是这种写法只能用于setup，不能用于hooks里面，所以报错。
vue3路由跳转params传参接收不到？
weixin_57399180的博客
03-03 6827
vue3路由跳转params传参接收不到？
Vue3的router路由跳转参数params接收不到
qq_33475629的博客
07-15 2612
1.跳转时使用name属性，不要用path。path和params同时使用时params不会生效。2.路由表里面router.js：path属性 初始化路由参数。注意：页面url上面会带有参数值，但是没有参数key，可忽略。3.页面里面获取：$route.params。
vue3-router获取query字段常见问题
zzang的博客
07-12 2719
先了解路由里面的history模式history: createWebHashHistory url上带#history:createWebHistory rul上不带#注意：如果使用history:createWebHistory模式，如果浏览器缓存带上了#，是获取不到query字段的。
router路由跳转使用query传递参数刷新后数据无法获取，变成[object object]
m0_37097272的博客
05-19 1542
跳转路由使用的是history.push，在query中添加了要传给详情页的值，如下： history.push({ pathname: '/menu/detail', query: { comCodeOption: this.state.comCodeOption, } 其中comCodeOption格式如下： [ { "comCode": "23", "comName": "黑龙江分公司" }, {
vue router 路由跳转获取不到参数
qq1154479896的博客
06-13 5075
问题： 路由传参一直不能获取到参数, 未出现报错 原因： 混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path 方法 代码： 错误写法 ... this.$router.push({ path: '/HealthDetectionChildNav', params: { title: item['name'], actionList: item['actionList'] }
解决Vue中 父子传值 数据丢失问题
10-16
主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue组件props传值对象获取不到的问题
10-16
主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3.0 CLI – 3.2 路由的初级使用教程
01-21
我的 github 地址 -vue3.0Study – 阶段学习成果都会建立分支。 ========================== 动态路由 在路由某部分里加入[ : ]，就成为动态路由如：/user/:id/，那么路由导航，并不是 /user/id/ 而是 /user/666/。...
记vue3中在hooks中使用useRoute， useRouter使用方法调用时获取不到对象的问题
a6588433的博客
01-24 801
这个在js文件里面引入并且调用的时候，会获取不到这两个对象看了vue-router的文档，发现是需要在setup的函数下使用才可以调用这两个对象。解决思路：如何hooks不能直接获取到route的话可以在vue的setup函数调用的时候传入。
vue散记：router的两种加载方式(无法读取全局变量的问题)
tianjiliuhen的博客
10-12 1317
确定引入的Cenium没有问题，但是页面加载的时候，确实没有找到this.Cenium对象，Cenium全局变量是在main.js中定义的，说明，当前页面先于main.js加载了。组件不会立即渲染，而是在项目整体加载完成之后，访问时才会加载，也就是在 main.js 加载之后才会加载，所以可以正常使用 main.js 中定义的全局变量，适合普通页面。结论：router中使用懒加载方式加载组件时，组件中的js逻辑会在main.js加载之后才执行，所以可以正常加载全局变量。router的两种组件加载方式。
this.$route.query获取不到参数信息
小菜鸡码农的博客
10-18 1332
this.$route.query获取不到参数信息
this.$route.query一直取不到
热门推荐
weixin_39897287的博客
11-25 1万+
在APP.vue里面 mounted里面（最前面） console.log(this.$route.query.source)第一次代码运行完成后能打印值， 后面刷新页面一直打印不了，也存了缓存 但是打印不出来，后来找到原因是 route.js并没有执行完毕console就打印出来了， 所以 this.$router.onReady(() => { i...
Vue3 vue-router刷新获取不到路由路径
yu3278326的博客
07-29 5363
今天修改写页面的时候发现一个Bug，底部导航栏默认是在首页，在其他页面进行刷新的时候，导航栏active又回回到首页，这样体验很不好 环境 "vue-router": "^4.0.10", "vue": "^3.0.5", "vant": "^3.1.5", <!-- template --> <router-view /> <van-tabbar v-model="navActive" active-color="#e4313
vue3.0父子组件传值
09-19
在Vue 3.0中，父子组件之间的传值可以使用props和emit实现。props是父组件向子组件传递数据的一种方式，子组件通过声明props来接收父组件传递的值。父组件可以将数据通过属性的形式绑定到子组件上，子组件可以在props属性中声明接收该属性的类型和默认值。例如： 父组件代码： <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, data() { return { parentMessage: "Hello from parent", }; }, }; </script> 子组件代码： <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, default: "", }, }, }; </script> 在这个例子中，父组件传递了一个名为parentMessage的数据到子组件中，子组件使用props接收到父组件传递的message，并在模板中显示出来。 除了props，Vue 3.0还引入了新的API emit，它可以用于在子组件中向父组件发送消息。子组件可以通过$emit方法发送一个自定义事件，并可以传递需要发送的数据。父组件可以通过在子组件上监听该事件，并在回调中接收子组件发送的数据。例如： 子组件代码： <template> <div> <button @click="sendMessage">Send Message</button> </div> </template> <script> export default { methods: { sendMessage() { this.$emit("messageSent", "Hello from child"); }, }, }; </script> 父组件代码： <template> <div> <child-component @messageSent="handleMessage"></child-component> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, methods: { handleMessage(message) { console.log(message); }, }, }; </script> 在这个例子中，子组件中的按钮点击事件调用sendMessage方法，该方法使用$emit发送一个名为messageSent的自定义事件，并将"Hello from child"作为参数传递。父组件在模板中使用@messageSent监听该事件，并通过handleMessage方法处理接收到的消息。在handleMessage方法中，我们打印出了从子组件发送的消息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值