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方式传递参数,接收方式也不同

posted @ 2020-01-16 20:36  Dora Doris  阅读(...)  评论(...编辑  收藏