vue路由传参和子组件接收值

caimaomaocai

于 2019-06-12 16:07:47 发布

阅读量2.7k

点赞数 1

本文详细介绍了如何在Vue.js中从父组件通过路由向子组件传递参数，并展示了如何在子组件中监听和使用这些参数。通过具体代码示例，解释了使用$router和$watch进行参数更新的方法。

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

1、父组件路由传参

this.$router.push({
                 path:'/roomDetail',
                 query:{
                        num:dd
                    }
               })

2、子组件接收

 created () {
            this.routerQuery = this.$route.query.num;
        },

关键部分代码

 watch : {
        routerQuery: function (newValue, oldValue) {
                 this.findPositionByRoom(newValue);
           },
            $route(to, from) {
                 console.log(to.query.num)
                 if(to.query.num != undefined){
                    this.findPositionByRoom(to.query.num);
                 }
             }
        },

以上jingzu