vue项目实战（三）- 旅游网站详情页面开发

一、详情页banner

添加动态路由：

{
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
  }

详情页首图：

效果图：

image.png

二、公共画廊组件拆分

新建一个公用组件，gallary.vue:

三、实现header渐隐渐现

四、全局事件解绑

activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  // 页面即将被隐藏或者被替换成新的页面时，执行该方法
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }

五、使用递归组件

数据：

list: [{
        title: '成人票',
        children: [{
          title: '成人三馆联票',
          children: [{
            title: '成人三馆联票-某一连锁店销售'
          }]
        }, {
          title: '成人五馆联票'
        }]
      }, {
        title: '学生票'
      }, {
        title: '儿童票'
      }, {
        title: '特惠票'
      }]

递归:

      

        
        {{item.title}}