<强>第一种
router.js
{
路径://课程/细节:pk,
名称:“球场细节”,
组件:CourseDetail
}
传递层
& lt; !——卡的内容
{
id: 1、
背景:“红”,
标题:“Python基础”
}
——比;
& lt; router-link:=" '/课程/细节/$ {card.id}’”在详情页& lt;/router-link>
接收层
<代码>让id=Ｃ涝猺oute.params.pk
演变体
”“”
{
路径:/课程/:pk/:名称/细节”,
名称:“球场细节”,
组件:CourseDetail
}
& lt; router-link:=" '/课程/$ {card.id}/$ {card.title}/细节”“祝辞详情页& lt;/router-link>
让id=route.params.pk美元
让标题=route.params.name美元
" " "
router.js
{//浏览器链接显示:/课程/细节,注:课程id是通过数据包方式传递
路径:/课程/细节,
名称:“球场细节”,
组件:CourseDetail
}
传递层
& lt; !——卡的内容
{
id: 1、
背景:“红”,
标题:“Python基础”
}
——比;
& lt; router-link:=" {
名称:“球场细节”,
参数:{pk: card.id}
}”在详情页& lt;/router-link>
接收层
<代码>让id=Ｃ涝猺oute.params.pk
router.js
{//浏览器链接显示:/课程/细节# 63;pk=1,注:课程id是通过路由拼接方式传递
路径:/课程/细节,
名称:“球场细节”,
组件:CourseDetail
}
传递层
& lt; !——卡的内容
{
id: 1、
背景:“红”,
标题:“Python基础”
}
——比;
& lt; router-link:=" {
名称:“球场细节”,
查询:{pk: card.id}
}”在详情页& lt;/router-link>
接收层
<代码>让id=Ｃ涝猺oute.query.pk
第一种
”“”
路由:
路径://课程/细节:pk的
跳转:id是存放课程id的变量
<代码>。美元router.push('/课程/细节/$ {id}’)
接收:
让id=route.params.pk美元
" " "
”“”
路由:
路径:/课程/细节的
跳转:id是存放课程id的变量
美元。router.push ({
“名称”:“球场细节”,
参数:{pk: id}
});
接收:
让id=route.params.pk美元
" " "
”“”
路由:
路径:/课程/细节的
跳转:id是存放课程id的变量
美元。router.push ({
“名称”:“球场细节”,
查询:{pk: id}
});
接收:
让id=route.query.pk美元
" " "
以上所述是小编给大家介绍的Vue-CLI项目中路由传参的方式详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
