您的位置: 首页  >  文章  >  去哪网项目详情页开发

去哪网项目详情页开发

分类: 文章 • 2025-03-16 19:32:39

经验积累：

1. 由于vue-router造成的样式改动

当我们通过vue-router进行路由跳转的时候，vue-router会给我默认转换为a标签，而a标签默认有一些样式，这样就不能达到我们预期的样式。
部分代码如下：

<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <router-link to="detail">
        <li class="item border-bottom" v-for="item of list" :key="item.id">
          <img class="item-img" :src="item.imgUrl" />
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
          </div>
        </li>
      </router-link>
    </ul>
  </div>
</template>

上面的问题可以通过修改样式来解决，但是太麻烦，Vue给我们提供了一个tag属性，即做如下修改即可：
部分代码：

<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <router-link
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
        tag="li"
        :to='"detail/"+ item.id'
      >
        <img class="item-img" :src="item.imgUrl" />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

2.动态路由

去哪网项目详情页开发
去哪网项目详情页开发

由于我们在首页的列表上无法确认具有多少个推荐项目，而路由却是需要根据有多少个推荐项目来设置，所有需要动态路由来进行处理。

动态路由通过冒号的形式设置

部分代码：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    },
    {
      path: '/detail/:id',   //通过冒号来设置动态路由
      name: 'Detail',
      component: Detail
    }
  ]
})

然后在请求ajax要加上请求的参数：
去哪网项目详情页开发

也可以这样写：
去哪网项目详情页开发

3. 对全局事件的解绑去哪网项目详情页开发

如果把一个事件绑定到window上是很不安全的，而keep-alive组件还给我们提供了一个生命周期函数deactivated，即当页面即将消失的时候会触发此函数，因此在函数上我们可以把绑定的事情再去掉这样就不会对其他页面造成影响了。

4. 解决由于keep-alive造成的缓存问题

通过在keep-alive组件上添加exclude属性来实现。
去哪网项目详情页开发

5. 组件中的name值的作用

  1. 做递归组件的时候会用到
<template>
  <div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
      </div>
      <div v-if="item.children" class="item-chilren">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  .item-title-icon
    position: relative
    left: .06rem
    top: .06rem
    display: inline-block
    width: .36rem
    height: .36rem
    background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
    margin-right: .1rem
    background-size: .4rem 3rem

  .item-title
    line-height: .8rem
    font-size: .32rem
    padding: 0 .2rem

  .item-chilren
    padding: 0 .2rem
</style>
  1. 当对某个页面取消缓存的时候会用到它
  2. 当通过dev-tool工具查看的时候，组件名字就是我们定义的名字

6. 滚动造成的多个页面之间互相影响

Vue-router官网参考 
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

只需要在路由管理上添加如上代码，让每次进行路由切换的时候X轴初始位置为0，Y轴初始位置为0，这样就可以解决了滚动造成的多个页面之间相互影响的问题。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

相关推荐