1. 程式人生 > 實用技巧 >vue之this.$router.query和this.$router.params的使用與區別

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

一 this.$router.query的使用:

1router/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