vue的params和query两种传参方式及URL的显示

路由配置：

 // 首页
    {
      path: '/home',
      name:'home',
      component:Home
    },
 // 行情
     {
      path: '/markets',
      name:'market',
      component:Market
    },

query传值和接收方式：

传值 

//第一种方式(字符串方式) 
this.$router.push('/markets?id=1&name=饭饭') 

//第二种方式(path方式) 
this.$router.push({path:'/markets',query:{id:1,name:'饭饭'}}) 

//第三种方式(name方式) 
this.$router.push({name:'market',query:{id:1,name:'饭饭'}})

 URL显示：

http://localhost:19091/#/markets?id=1&name=fanfan

 接收数据

console.log(this.$route.query.id); // 1
console.log(this.$route.query.name);// 饭饭

 

params传值和接收方式：

传值

//第一种方式
this.$router.push('/markets/1/饭饭')
//第二种方式
this.$router.push({path:'/markets',params:{id:1,name:'饭饭'}})

URL显示

//第一种方式：（此时参数值在url种显示）
http://localhost:19091/#/markets/1/饭饭

//第二种方式：（此时参数及参数值都不在url种显示）
http://localhost:19091/#/markets

对于第一种方式的路由需要改为下边的配置，第二种方式不需要修改路由

   // 首页
    {
      path: '/home',
      name:'home',
      component:Home
    },
     // 行情
     {
      path: '/markets/:id/:name',
      name:'market',
      component:Market
    },

接收数据

console.log(this.$route.params.id);// 1
console.log(this.$route.params.name);//饭饭

总结：query和params传参方式不同之处在于，query传参会在url中显示参数以及参数值，params方式则不显示或者只显示对应值，且以‘/’方式显示，params方式不能用path方式传递参数，接收方式也不同