Day08-尚品汇-详情模块-滚动行为

提纲挈领:

Day08-尚品汇-详情模块-滚动行为_第1张图片

 1.先把静态组件放在pages文件夹下:

Day08-尚品汇-详情模块-滚动行为_第2张图片

2.在router里面的index.js里面配置一下路由

Day08-尚品汇-详情模块-滚动行为_第3张图片 

 3.从博主的演示视频里面得知,点击图片

Day08-尚品汇-详情模块-滚动行为_第4张图片

1)因为是params传参-------所以要在router的index.js里面给Detail处-----加占位符 

Day08-尚品汇-详情模块-滚动行为_第5张图片 

2)在search组件的销售列表的图片处。

Day08-尚品汇-详情模块-滚动行为_第6张图片

2)---的效果图:

Day08-尚品汇-详情模块-滚动行为_第7张图片 

 1》第一个手机

 

2》第二个手机

 

 最终调到的网页位置都没有在顶部

 Day08-尚品汇-详情模块-滚动行为_第8张图片

解决问题(路由跳转到detail页面,没有在顶部) 

1》官方文档vue-router的滚动行为

Day08-尚品汇-详情模块-滚动行为_第9张图片

2》在router文件夹下的index.js里面

Day08-尚品汇-详情模块-滚动行为_第10张图片 

3》.在routes.js里面把从index.js里面的东西写起来。

Day08-尚品汇-详情模块-滚动行为_第11张图片 

4.》注意在index.js里面引入和使用

Day08-尚品汇-详情模块-滚动行为_第12张图片 

补充一下2》---3》----4》仅简化router里面的内容,让人看着清楚一点。

5》 利用scrollBehavior     y=0

Day08-尚品汇-详情模块-滚动行为_第13张图片

 

 Day08-尚品汇-详情模块-滚动行为_第14张图片

 

你可能感兴趣的:(尚品汇,实战,尚品汇)