vue之this.$router.query和this.$router.params的使用與區別
阿新 • • 發佈:2020-11-25
一 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