大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
一.标签传参方式:
10多年建站经验, 成都网站设计、做网站客户的见证与正确选择。成都创新互联公司提供完善的营销型网页建站明细报价表。后期开发更加便捷高效,我们致力于追求更美、更快、更规范。
第一种
router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail }
传递层
详情页
接收层
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 }
传递层
详情页
接收层
let id = this.$route.params.pk
第三种
router.js { // 浏览器链接显示:/course/detail?pk=1,注:课程id是通过路由拼接方式传递 path: '/course/detail', name: 'course-detail', component: CourseDetail }
传递层
详情页
接收层
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项目中路由传参的方式详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!