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

一、this.$route.query的使用

  1、router/index.js

    {
    path:'/mtindex',
    component: mtindex,
    //添加路由
    children:[
     {
      path:':shopid',
      component:guessdetail
     }
    ]    

    },

2、传参数

this.$router.push({
      path: '/mtindex/detail', query:{shopid: item.id}

        });

3、获取参数

this.$route.query.shopid

4、url的表现形式(url中带有参数)

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

二、this.$route.params

1、router/index.js

{
    path:'/mtindex',
    component: mtindex,
    //添加路由
    children:[
     {
      path:"/detail",
      name:'detail',
      component:guessdetail
     }
    ]    

    },

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

this.$router.push({
      name: 'detail', params:{shopid: item.id}

        });

3、获取参数

this.$route.params.shopid

4、url的表现形式(url中没带参数)

http://localhost:8080/#/mtindex