Vue路由动态传参

路由动态传参

 根据导航菜单实现点击跳转不同组件携带所需要使用的参数，因为Vue是单页面，所以跳转时组件之间的跳转，这时就可以使用路由动态传参来解决这个问题，以下是路由动态传参的两种方式

一．Params（通过路由属性中的name匹配路由，再根据params传递参数）
1.路由配置：路径后面不需要再加传入的参数，但是name必须和父组件中的name一致

{
name:"Goodsdetail",
// 定义了变量：phonename
path:"/Goodsdetail/:phonename", 
component:Goodsdetail
},

2.跳转时传参
（1）.编程式跳转（匹配路由配置好的属性名）

<li v-for="(phone) in phones" :key="phone.id" @click="goDetail(phone.name)">

/methods:{
goDetail(phonename){
this.$router.push({
name:"Goodsdetail",
params:{phonename:phonename}
});
}
}

（2）.声明式跳转

<router-link :to="{name:Goodsdetail, params:{phonename:"手机"}}">Goodsdetail </router-link>

3.接

this.$route.params.phonename

二．Query
1.路由配置
路由配置正常配置就可以，不用更改
传参

this.$router.push({
    path: '/test', //跳转的路径
    query: {
        id: this.id
    }
})

接：this.$route.query.id