vue之this.$router.query和this.$router.params的使用与区别

一  this.$router.query的使用：

1 router/index.js

 1     {
 2      path:'/mtindex',
 3      component: mtindex,
 4      //添加路由
 5      children:[
 6        {
 7         path:':shopid',
 8         component:guessdetail
 9        }
10      ]     
11     },

2 传参数

1 this.$router.push({
2         path: '/mtindex/detail', query:{shopid: item.id}
3        });

3 获取参数

1 this.$route.query.shopid

4 url的表现形式（url中带有参数）

http://localhost:8080/#/mtindex/detail?shopid=1

二 this.$router.params的使用:

1 router/index.js

 1 {
 2      path:'/mtindex',
 3      component: mtindex,
 4      //添加路由
 5      children:[
 6        {
 7         path:"/detail",
 8         name:'detail',
 9         component:guessdetail
10        }
11      ]     
12 
13     },

2 传参数（params相对应的是name  query相对应的是path）

1 this.$router.push({
2         name: 'detail', params:{shopid: item.id}、
3         });

3 获取参数

1 this.$route.params.shopid

4 url的表现形式（url中没有带参数）

http://localhost:8080/#/mtindex