vue路由跳转并传参

177 阅读1分钟

router-link跳转

 <router-link to="/cart">跳转到cart</router-link>
 2.用params传参
     <router-link :to="{name:'Cart',params:{cartId:1235456}}">
        跳转到cart
     </router-link>
     接受用   {{this.$route.params.cartId}}
 3.用query传参
     <router-link :to="{path:'/cart',query:{cartId:6666}}">
        跳转到cart
     </router-link>
     接受用   {{this.$route.query.cartId}}

编程式跳转

methods:{
    jump(){
        // this.$router.push({
        //     path:"/cart?goodsId=456"
        // })
        // this.$router.push({
        //     name:"Cart",
        //     params:{
        //         goodsId:123
        //     }
        // })
        this.$router.push({
            name:"Cart",
            query:{
                goodsId:123
            }
        })
    }
}

接受参数方式
    {{this.$route.query.goodsId}}
    {{this.$route.params.goodsId}}
    {{this.$route.query.goodsId}}