产品详情页面开发

import Vue from 'vue';
import Router from 'vue-router';
import index from '../views/index';
import home from '../components/home.vue';
import alllist from '../views/productList';
// 1. 引入产品详情组件
import detail from './views/product';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      children: [
        {
          path: '/',
          name: 'home',
          component: home
        },
        {
          path: '/alllist',
          name: 'alllist',
          component: alllist
        }
      ]
    },
    // 2. 创建产品详情匹配规则
    {
      path: '/detail',
      name: 'detail',
      component: detail
    }
  ]
});

<div class="index_hot_main">
  <ul>
    <li v-for="(item, i) in allList" :key="i">
      <img :src="item.productImageUrl" @click="toLink(item.productId)" />
      <p>
        {{ item.productName }}<br />{{ item.salePrice }}元
      </p>
    </li>
  </ul>
</div>

// 事件代码
methods: {
  toLink(pid) {
    this.$router.push({
      path: `detail?productid=${pid}`
    });
  }
}

<template>
  <div>
    <h1>产品详情</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  created() {
    // 获取传递过来的 productid
    console.log(this.$route.query.productid);
    var pid = this.$route.query.productid;
  }
};
</script>

<template>
  <div>
    <h1>{{ detailData.productName }}</h1>
    <div v-html="detailData.detail"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailData: {}
    };
  },
  methods: {
    // 调用接口获取数据
    getdata(id) {
      this.$axios({
        methods: 'get',
        url: `http://api.mm2018.com:8095/api/goods/productDet?productId=${id}`
      }).then(res => {
        // console.log(res.data)
        this.detailData = res.data;
      });
    }
  },
  created() {
    // 获取传递过来的 productid
    var pid = this.$route.query.productid;
    // 生命周期函数调用方法
    this.getdata(pid);
  }
};
</script>