- 路由Router的设置
{
path:'/detail/:id', //注意这个位置,参数写在后头
component:Detail
}
- 传递使用
//方法一:
goodsClick(id){
this.$router.push('/detail/'+id) //传递的时候,记得加上变量
}
//方法二:
goodsClick(id){
this.$router.push({
path:'/detail/'+id
})
}
- 获取参数
我是Detail {{$route.params.id}} //params获取数据
用name属性进行传值:
- 路由Router的设置
{
path:'/detail',
name:'Detail', //运用这个name属性进行跳转
component:Detail
}
- 传递使用
goodsClick(id){
this.$router.push({
name:'Detail', //用name进行跳转
params:{ //params属性传递参数
id
}
})
}
- 获取参数
我是Detail {{$route.params.id}} //params获取数据
用path属性进行传值:
- 路由Router的设置
{
path:'/detail', //运用这个path属性进行跳转
component:Detail
}
- 路由Router的设置
goodsClick(id){
this.$router.push({
path:'/detail', //path进行跳转
query:{ //query传递参数
id
}
})
}
- 获取参数
我是Detail {{$route.query.id}} //注意,这里是query哦
总结:
提示:三种方法的区别
- 直接在url后面传值,用 $route.params 获取参数值 - 参数在url后面显示,例: localhost:8080/detail/1lyp2vg ,直接跟着 ------------------------------------------------------------------------------------- - 用name,params进行传参,用 $route.params 获取参数值 - 参数在url后面不显示,例:localhost:8080/detail, - 注:这种方法在刷新页面的时候,传递的值会丢失; ------------------------------------------------------------------------------------- - 用path,query进行传参,用$route.query获取参数值 - 参数在url后面显示,例: localhost:8080/detail?id=1m7jj7a ?后key=value模式跟着



