慕课网仿去哪儿项目笔记--（五）-详情页面的开发

一，详情页动态路由及banner布局

第一步:利用tag属性把router-link变成对应的标签

第二步，利用to来指定路由跳转的url:

第三步：新建这个页面的组件Detail,然后配置路由

这里利用:id创建的是动态路由，意思是url必须包含detail/,而后面可以带一个参数，参数会放到id这样的一个变量里面。

第四步，创建banner组件（页面顶部显示图片的组件），然后导入detail

第五步，完成banner部分的基本布局

利用position和flex完成.

在这个过程中，遇到了一个问题，因为采用的是position布局，而后面又添加了渐变的蒙版，这就导致点击返回按钮时，先点击到蒙版上，导致返回按键失效。
我就把这个元素放置到最上面，解决了这个问题：

二，公用图片画廊组件

这个页面经常用到。所以也搞成独立的组件。

第一步：完成页面的基本布局，利用的是flex的副轴中间排布

第二步：利用swiper完成轮播的效果：

第三步：实现点击画廊组件时，隐藏画廊组件

这里需要使用到子组件向父组件传值的方式

三，实现header分支的渐隐渐显效果

实现的效果如下：

第一步，创建header组件，然后导入Banner组件中使用。

第二步：创建页面元素，给两种返回方式用v-show来控制切换

第三步：监听scroll事件，控制两者的切换和实现渐隐渐显效果

四，关于全局事件的解绑

之前唉，我们在header组件使用的是全局的方法，这样会导致其他的组件页面中也会执行：

而以前，我们事件的调用是绑定在页面元素上的，就不会存在这样的问题。
为了解决这个问题，就需要知道。activeted这个生命周期函数。它是引入了keep-alive标签之后产生的。每当router-view页面发生切换打开时,就会发生。
而对应的，为了解绑它调用的全局事件。可以使用deactived生命周期函数。它是在页面关闭时发生。
于是代码修改为：

五，使用递归组件实现详情列表页面

六，使用axios获取数据