路由传参的方式？查询参数和动态参数传递和获取？

谈一谈路由传参的方式？查询参数和动态参数传递和获取？

一、使用router-link进行路由导航，传递参数

• 父组件中：使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航
• 子组件中：使用this.$route.params.num来接收路由参数

二、通过路由属性中的name来确定匹配的路由，通过params来传递参数

• 父组件中：使用name来匹配路由

  methods:{
        
        
      toChild(){
        
        
          this.$router.push({
        
        
          name:'child', 
          params:{
        
        
              id:1
          }
          })
      }
  }
  

• 子组件中：使用this.$route.params.id接收参数

三、使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？

• 父组件中：使用query传递参数

  methods:{
        
        
      toChild(){
        
        
          this.$router.push({
        
        
          path:'/child', 
          query:{
        
        
              id:1
          }
          })
      }
  }
  

• 子组件中：使用this.$route.query.id 来接收参数

注意：

params传参，push里面只能使用name匹配路由,不能使用path,如果这里写成了path，接收参数页面会是undefined！！！

总结：

• 使用path方式跳转路由 path会忽略params 所以path不能和params一起使用
• 推荐使用name和query方式实现路由跳转
• query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数
• params相当于POST请求，参数不会在地址栏中显示