这篇文章主要介绍了Vue-CLI项目中路由传参的方式详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
一.标签传参方式：
第一种
router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail }
传递层
<!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } -->详情页
接收层
let id = this.$route.params.pk
演变体
""" { path: '/course/:pk/:name/detail', name: 'course-detail', component: CourseDetail } 详情页 let id = this.$route.params.pk let title = this.$route.params.name """
第二种
router.js { // 浏览器链接显示：/course/detail，注：课程id是通过数据包方式传递 path: '/course/detail', name: 'course-detail', component: CourseDetail }
传递层
<!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } -->详情页
接收层
let id = this.$route.params.pk
第三种
router.js { // 浏览器链接显示：/course/detail?pk=1，注：课程id是通过路由拼接方式传递 path: '/course/detail', name: 'course-detail', component: CourseDetail }
传递层
<!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } -->详情页
接收层
let id = this.$route.query.pk
二.逻辑传参：this.$router
第一种
""" 路由： path: '/course/detail/:pk'
跳转：id是存放课程id的变量
this.$router.push(`/course/detail/${id}`)
接收：
let id = this.$route.params.pk """
第二种
""" 路由： path: '/course/detail' 跳转：id是存放课程id的变量 this.$router.push({ 'name': 'course-detail', params: {pk: id} }); 接收： let id = this.$route.params.pk """
第三种
""" 路由： path: '/course/detail' 跳转：id是存放课程id的变量 this.$router.push({ 'name': 'course-detail', query: {pk: id} }); 接收： let id = this.$route.query.pk """
总结
以上所述是小编给大家介绍的Vue-CLI项目中路由传参的方式详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
以上就是Vue-CLI项目中路由传参
本文来源gaodai.ma#com搞##代!^码@网*
的方式详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue-CLI项目中路由传参的方式详解
转载请注明原文链接：Vue-CLI项目中路由传参的方式详解
