# router用的是ES6語法傳值方式 ``` `${}` ``` ~~~ this.$router.push(`/goods/detail/${id}`) ~~~ # 代碼案例： ~~~ <template> <ul> <li @click="getGoods(goods.id)" v-for="(goods,index) in goodsList" :key="index">{{goods.name}}</li> </ul> <!--點擊每個li獲取每一個的id--> </template> <script> export default { data:function(){ return{ goodsList:[ {id:1,name:'華為手機'}, {id:2,name:'小米手機'}, {id:3,name:'OPPO手機'}, ] } }, methods:{ getGoods:function (id){ this.$router.push(`/goods/detail/${id}`) //獲取對應id 跳轉到相應頁面 } } } </script> <style scoped> </style> ~~~ index.js路由文件里 ~~~ { path:'/goods/detail/:id', //這里設置接收值 component: Detail, }, ~~~ ## 獲取 路由里的參數 ``` this.$route.params.id //里面的id為傳遞過來的 ``` ## query方式傳送參數 ~~~ this.$router.push({path:'/goods/detail',query:{id:id}}) //qurey方式發送參數 ~~~ ## query方式接受參數 ~~~ this.$route.query.id //接收query方式傳送的參數 ~~~ ## query方式路由設置 ~~~ { path:'/goods/detail', //這里設置接收值 component: Detail, }, ~~~ # 聲明路傳參： ~~~ this.$router.push({name:'detail',params:{id:id}}) //生明式傳參 ~~~ ## 聲明方式接受參數 ~~~ this.$route.params.id //接收生明方式傳送的參數 ~~~ ## 聲明式方式路由設置 ~~~ { path:'/goods/detail', //聲明式路由設置 name:'detail', component: Detail, }, ~~~