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(){
        
        }
 
}

未配置属性

配置了属性

vue----webpack模板----路由传值

猜你喜欢