vue----webpack模板----路由传值
1.路由传值的3种方式
通过动态路由<route-link>进行传值
1.params传值 2.query传值 3.路由解耦
1.params传值（传值时，必须使用name属性，不能使用path属性）
index.js路由配置项
path:"/details/:name/:price/:id",//属性可写可不写， 如果写了，就必须传相应的值，也可传其它的，地址栏中只显示配置的属性及值，如如果没有写，地址栏中不显示，但值能传递过去
路由跳转（进行传值） <router-link :to="{name:'details',params:{name:item.goodsName, price:item.goodsPrice, id:index, a:1, b:2}}"
组件中接收值：（在data中进行接收值，因为可以访问到vue身上的所有属性） details.js(接收值) created(){ // console.log(this.$route) this.goodsName = this.$route.params.name; this.goodsPrice = this.$route.params.price; }
2.query传值
index.js路由配置项
path:"/details/:name/:price/:id", //属性可写可不写，传值的个数不受index.js配置项的限制，所传的值都会在地址栏中显示 路由跳转（进行传值） <router-link :to="{name:'details',query:{name:item.goodsName, price:item.goodsPrice, id:index, a:1, b:2}}" details.js(接收值) created(){ // console.log(this.$route) this.goodsName = this.$route.query.name; this.goodsPrice = this.$route.query.price; }
3.路由解耦（必须用params传值，否则props接收不到,必须配置props：true ）
index.js路由配置项
path:"/details/:name/:price/:id", props:true //属性可写可不写，传值的个数不受index.js配置项的限制，值都能传过去,但是，地址栏中只显示配置了的属性及对应的值 路由跳转（进行传值） <router-link :to="{name:'details',params:{name:item.goodsName, price:item.goodsPrice, id:index, a:1, b:2}}" details.js(接收值),接收的值可以直接使用 props:["name","price","id","a","b"]
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
应用举例
由商品列表 查看 商品的详细信息
点击不同的商品，跳转到相同的路由，/details,但是传的值是不同的
params传值代码如下：
配置： { //方式1：param,属性必须写 path:"/details/:name/:price/:id",//属性可不写， 如果写了，就必须传相应的值，地址栏中只显示配置的属性及值，如如果没有写，地址栏中不显示，但值能传递过去 name:"details", component:details } ------------------------------------------------------------------------------------- 商品列表：（传值） <li v-for="(item,index) in goodslist"> <!--第一种传值方式： "'/details/' + item.goodsName + '/' + item.goodsPrice + '/' + index" --> <!-- 第二种： <router-link :to="{name:'details',params:{name:item.goodsName,price:item.goodsPrice,id:index,a:1,b:2}}" > --> <router-link :to="{name:'details',params:{name:item.goodsName,price:item.goodsPrice,id:index}}" >//传值的个数不受配置项中属性的限制，只是，在完全不设置属性时，详情页能接收到所有的值，但url地址中不显示，，，，，，，，如果设置了属性，必须要传属性对应的值（否则报错）也可以穿未定义属性的值，详情页能接收到所有的值，但是地址中只显示配置的属性 及对应的值 <p>{{item.goodsName}}</p> <p>{{item.goodsPrice}}</p> </router-link> </li> ------------------------------------------------------------------------------------------------ 详情页：（接收值 ） export default { data(){ return{ goodsName:"", goodsPrice:"" } }, created(){ // console.log(this.$route) this.goodsName = this.$route.params.name; this.goodsPrice = this.$route.params.price; } }
详情页：
当写属性时：（传值的个数和定义的属性不是对应的，自己写的属性及值也会传过去，地址中只会显示配置的属性及值，为配置的不显示）
当不写属性时（值会传过去，但是在地址中不显示）
query传值如下：
配置： { //方式1：param,属性可不写 path:"/details",//属性可写可不写，地址栏中会显示传递的所有值 name:"details", component:details } -------------------------------------------------------------------------------------------------------- 商品列表：（传值） <li v-for="(item,index) in goodslist"> <router-link :to="{name:'details',query:{name:item.goodsName,price:item.goodsPrice,id:index,a:1,b:2}}" >//传值的个数不受index.js配置项的限制，所传的值都会在地址栏中显示 <p>{{item.goodsName}}</p> <p>{{item.goodsPrice}}</p> </router-link> </li> -------------------------------------------------------------------------------------------------------------------- 详情页：（接收值 ） export default { data(){ return{ goodsName:"", goodsPrice:"" } }, created(){ // console.log(this.$route) this.goodsName = this.$route.query.name; this.goodsPrice = this.$route.query.price; } }
props传值如下：
配置： { path:"/details", name:"details", component:details, props:true } -------------------------------------------------------------------------------------------------- 商品列表：（传值） <li v-for="(item,index) in goodslist"> <router-link :to="{name:'details',params:{name:item.goodsName,price:item.goodsPrice,id:index,a:1,b:2}}" > <p>{{name}}</p> <p>{{price}}</p> </router-link> </li> ------------------------------------------------------------------------------------------------- 详情页：（接收值 ） export default { data(){ return{ goodsName:"", goodsPrice:"" } }, props:["name","price","id","a","b"]//接收传来的值 created(){ } }
未配置属性
配置了属性
