页面跳转以后没有显示产品组件啊，

product组件：

<template>

  <div class="product">

    我的产品

  </div>

</template>

<script>

export default {

  name: 'product'

}

</script>

<style lang='scss' scoped>

.product

  overflow hidden

  width 100%

  height 100%

  background black

  position absolute

  left 0

  top 0

  z-index 20000

</style>

路由页：

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

export default new Router({

  routes: [

    {

      name: 'home',

      path: '/home',

      component: () => import('pages/home'),

      children: [

        {

          name: 'home-product',

          path: 'product/:id',

          component: () => import('pages/product')

        }

      ]

    },

    {

      name: 'category',

      path: '/category',

      component: () => import('pages/category')

    },

    {

      name: 'cart',

      path: '/cart',

      component: () => import('pages/cart')

    },

    {

      name: 'personal',

      path: '/personal',

      component: () => import('pages/personel')

    },

    {

      name: 'search',

      path: '/search',

      component: () => import('pages/search')

    },

    {

      path: '*',

      redirect: '/home'

    }

  ]

})

recommend页面：

<template>

  <div class="recommend">

    <h3 class="recommend-title">热卖推荐</h3>

    <ul class="recommend-list">

      <li class="item" v-for="(item,index) of recommendList" :key=index>

        <router-link class="item-link" :to="{name:'home-product',params:{id:item.baseinfo.itemId}}">

          <p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrl"></p>

          <p class="recommend-name">{{item.name.shortName}}</p>

          <p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>

          <p class="recommend-info">

            <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>

            <span class="recommend-count">{{item.remind.soldCount}}件已售</span>

          </p>

        </router-link>

      </li>

    </ul>

  </div>

</template>

<script>

import {getHomeRecommend} from 'api/home'

export default {

  name: 'homeRecommend',

  data () {

    return {

      recommendList: [],

      curPage: 1,

      totalPage: 1

    }

  },

  created () {

    this.getRecommend()

  },

  methods: {

    getRecommend () {

      if (this.curPage > this.totalPage) {

        return

      }

      getHomeRecommend(this.curPage).then(data => {

        if (data) {

          this.curPage++

          this.totalPage = data.totalPage

          this.recommendList = this.recommendList.concat(data.itemList)

        }

      })

    }

  }

}

</script>

<style lang="scss" scoped>

  @import '~@/assets/stylus/mixin';

  .recommend

    {width: 100%;}

    &-title

      {position: relative;

      padding: 10px 0;

      width: 100%;

      text-align: center;

      font-size: 12px;}

      &:before,&:after

        {content: '';

        position: absolute;

        height: 1px;

        width: 40%;

        top: 50%;

        background-color: #ddd;}

      &:before

        {left: 0;}

      &:after

        {right: 0;}

    &-list

      {display:flex;

      justify-content: center;

      flex-wrap: wrap;}

      .item

        {width: 49%;

        background-color: #fff;

        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.12);

        margin-bottom: 8px;

        position: relative;}

        &-link

          {display: block;}

        .recommend-pic

          {width: 100%;

          padding-bottom: 100%;

          height: 0;

          margin-bottom: 5px;}

          .recommend-img

            {width: 100%;}

        .recommend-name

          {padding: 0 10px;

          multiline-ellipsis();}

        .recommend-origPrice

          {padding: 10px 20px 10px;}

        .recommend-info

          {flex-between();

          padding: 10px;

          margin-bottom: 15px;}

          .recommend-price

            {font-size: 16px;

            color: red;}

          .recommend-count

            {font-size: 12px;}

  </style>