# 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, }, ~~~