vue之this.$router.query和this.$router.params的使用與區別

一  this.$router.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.$router.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