vue从路由中提取参数的几种方法

今天开发中,开发跳转详情功能时,需要提取路由中携带的参数,所以整理使用$rote提取参数的几种方法

1. query方法传参和提取参数

   • router传参：

     this.$router.push({
             path:'/xxx'
             query:{
               id:1
             }
           })
        
     

     或者:

     this.$router.push("/xxx?id="+'1')
     

   • 链接的表现形式:http://localhost:8080/xxx?id=1

   • route获取参数

     this.$route.query.id
     

2. params方式传参和接受参数

   • router传参：

     this.$router.push({
             name:'xxx'
             params:{
               id:1
             }
           })
     

   • 链接的表现形式:http://localhost:8080/xxx

   • route获取参数

     this.$route.params.id
     

总结

query与params的区别就相当与get与post请求,跳转的时候query在地址栏可以看到参数,而params不会在地址栏显示参数,另外在使用params传参时,push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined