商品列表页面跳转商品详情页面

商品列表页面点击商品图片或者按钮跳转到商品详情页面这是前端开发中较为常见的页面书写，那么对于初级前端开发者来说，想要实现这一功能，首先需要了解要实现该功能，我们需要完成哪几部:

商品列表页面要跳转到不同的路由；
商品详情页面要接收到路由传来的参数；
将商品详情页面的数据进行处理，需要给定一个变量，类似于id的唯一标识，因为该标识要与商品列表页面传递过来的参数一致，这样方便两者去比较；
页面的渲染

大致就分为以上这几步，我们现在就来以实际案例来实现该过程

一、商品列表页面要跳转到不同的路由；

以下代码是要循环的商品数组，就写一个为例：

    titleList: [
        {
          key: 0,
          title: '产品',
          href: '#1F',
          name: '1F',
          children: [
            {
              title: '升级',
              url: 'https://img.yyhy.me/api/img?id=4000',
              key: 0,
              router: '1'
            },
            {
              title: '智能',
              url: 'https://img.yyhy.me/api/img?id=4002',
              key: 1,
              router: '2'
            }
          ]
        },
        {...}....

该代码是商品列表以及图片的循环，以及点击事件的绑定:

        <div
          class="list"
          v-for="item in titleList" //循环的商品列表
          :key="item.key"
          :name="item.name"
          :id="item.name"
        >
          <div class="title">{{item.title}}.</div>
          <div class="content">
            <div
              class="children_list"
              v-for="itemList in item.children"  //循环的商品列表
              :key="itemList.key"
              @click="enterDetail(itemList)"
            >
              <div class="children_picture">
                <img :src="itemList.url" />
              </div>
              <div class="children_title">{{itemList.title}}</div>
            </div>
          </div>
        </div>

该方法是点击商品图片或者名称所要跳转的路由，而${item.router}是不同的商品传递过去的唯一标识


 enterDetail (item) {
     this.$router.push({ path: `/service/product/${item.router}` })
   }

二、商品详情页面要接收到路由传来的参数；

首先我们在点击商品的时候可以在URL地址栏中看到每个商品都会在后面有自己的唯一标识传过来，那么我们怎么拿到这个数据呢，这个数据可以放在钩子函数mounted（）中，可以先打印一下传过来的数据是什么console.log(this.$route.param)，然后找到你需要的那个

 mounted () {
    this.judgeData(this.$route.params.id)
  }

首先需要在data中放一个空的对象content: {}，将对应需要显示的当前商品详情页面放在该对象中，然后用该对象来渲染商品页面

三、将商品详情页面的数据进行处理

该数组是要显示的不同商品详情

data: [
        {
          id: 1,
          productAbstract: '汽车',
          firstContent: {
            img: 'https://img.yyhy.me/api/img?id=4000',
            title: '特点与优势',
            content1: '汽车介绍一',
            content2: '汽车介绍二。'
          },
          {
          id: 2,
          productAbstract: '电动车',
          firstContent: {
            img: 'https://img.yyhy.me/api/img?id=4000',
            title: '特点与优势',
            content1: '电动车介绍一',
            content2: '电动车介绍二'
          },
          {}...

下面的代码是便利所有的商品列表数组，找到我们需要显示的那个商品Number(id) === this.data[i].id然后放到我们初始化的那个空对象中

judgeData (id) {
     for (let i = 0; i < this.data.length; i++) {
       if (Number(id) === this.data[i].id) {
         this.content = this.data[i]
         this.showData = true
       }
     }
   }

四、页面的渲染

这一步就不上代码了，只需要便利刚才初始化的那个对象content: {}就可以啦

最后编辑于：2020.07.17 12:49:06