vue系列教程之微商城项目|商品详情

问题描述

页面注册

1.在secondary中,新建商品详情页shopDetail.vue

2.在路由配置页面router/index.js中，注册该页面的路由 

3.监听商品列表页的商品点击事件，当点击后携带数据跳转到商品详情页(上一文中已完成)

解决方案

页面编写

1.引入顶部导航栏，并使用

2.获取上一个页面跳转携带的数据

3.可以先将数据简单的放到页面上查看效果

4.需要注意的是，这种获取方式数据，并渲染到页面上时，页面始终只显示最开始渲染的数据，也就是点击第一个商品，显示第一个商品的数据，点击第二个商品还是显示第一个商品。

原因：所有路由对应页面的显示都是在App.vue中的<router-view>标签内，这个标签对于路由会采取缓存策略，也就是说只有路由不同时才会刷新页面组件，但我们所有的商品点击事件都是跳转到商品详情页，都是同一个路由，只是路由后面跟的值不同。

解决方案：将<router-view>改为<router-view :key="$route.fullPath">

ps : vue中为组件添加key属性，只要改变key值就会刷新组件，这是强制刷新组件的方法之一。

5.引入better-scroll，初始化滚动对象。在上一张图片中可以看到，如果你不设置滚动，图片内容已经影响到了导航栏的显示。

初始化流程：给父容器设置固定宽高,并添加ref方便获取该节点元素,父容器中只能有一个子元素，必须在子元素渲染完成后再进行better-scroll的初始化。

添加商品导航

vant-ui中提供了现成的商品导航

1.根据vant-ui文档引入，并查看效果

可以看到商品导航和底部导航栏重叠了，在这个页面其实可以不需要底部导航栏，那要如何让底部导航栏在这个页面不显示呢？

2.动态显示底部导航栏

方案：在App.vue中通过watch监听当前路由对象$route的变化，当页面跳转到商品详情页'/shopDetail'时，给导航栏设置v-show，让其隐藏.

关键代码

代码解析：

['/shopDetail'].indexOf(this.$route.path) 如果this.$route.path在数组中就返回数组的下标，如果不在数组中就返回-1，由于导航栏只在少数页面不显示，我们只在数组中记录不显示的页面路由，所以不显示页面路由在数组中就会返回下标，不在就返回-1，当结果!=-1时就表示在数组中，就需要隐藏导航栏.

美化页面

结语

完整代码

App.vue

views/secondary/shopDetail.vue

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）