从品牌网站建设到网络营销策划,从策略到执行的一站式服务
一般项目中,我们会遇到有个list。。。然后你随便点击一个,会进入他对应的详情页。。。正常,那个详情页是一个公共的组件,我们只需根据id传值来判断,这个页面显示的是哪个list的数据即可。如图:点击电影进入电影详情……以此类推
为长子等地区用户提供了全套网页设计制作服务,及长子网站建设行业解决方案。主营业务为成都网站设计、做网站、长子网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
具体代码如下:
(有人会奇怪,我为什么不循环……这个是根据项目需求而定的,这个相当于入口,而进入里面分别对应的还是多个list,并且后台给的图片的url也不一样,我懒得v-if去写了,so,这三个我就用了通过了路由id过去。当然,后面有循环list。。两种不同的方式,大家根据自己的项目来选择就好微笑)
![]()
电影 • 纪录片
![]()
室内乐 • 下午茶
![]()
沙龙 • 讲谈
而路由index.js里面需要如下写:
{ path: 'itemList/:id', name: 'itemList', component: resolve => require(['components/club/itemList.vue'], resolve) },
这样就完成了初步的列表进入对应的页面。有人会发现, 看我的截图,明显是有左右滑动的,这里是我把代码删掉了,因为那个不是我今天要巩固的= =。接下来,就是在对应页面是N个列表list,我们需要点击每个进入他所对应的详情页,而我也是用循环写的list(就是上面的第二张图片,推荐下的list太多了,不循环会死人的偷笑),具体代码如下:
推荐
经典
![]()
这里我把循环出的列表写了个单独的组件。movieType组件内容如下:
![]()
{{item.NAME}}
当然,最重要的一步不能忘掉。。。我们需要修改路由index.js文件:
{ path: 'itemDetail/:ID', name: 'itemDetail', component: resolve => require(['components/club/itemDetail.vue'], resolve) },
这样就大功告成了。两种方法,喜欢哪种用哪种就好。。
以上这篇vue2中,根据list的id进入对应的详情页并修改title方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图