recommend 这个组件的router-link 不能跳转到product  上面的地址栏变化

http://localhost:8082/#/home 点击图片

http://localhost:8082/#/home/product/590030941756

home界面代码

<template>
   <div class="home">
    <home-header class="home-header">
     <i class="iconfont icon-scan" slot="left"></i>
         <div slot="center" @click=routerTo>搜索框</div>
     <router-link slot="right" to='/personal' >
       <img src="../../assets/img/小房子.png" class="home-right" alt="photo">
     </router-link>
   </home-header>
   <div class="container">
       <home-swiper></home-swiper>
       <home-nav></home-nav>
       <home-recommend :news='information'></home-recommend>
   </div>
       <router-view></router-view>
   </div>
</template>
<style lang="scss">
.home{
   position: relative;
   width: 100%;
   height:100%;
   padding-bottom:50px;
   .home-header{
   width: 100%;
   height: 50px;
   position: absolute;
   left:0;
   top:0;
   display: flex;
   align-items:center;
   z-index:1002;
   img{
       width: 30px;
       margin-top:10px;
   }
}
.container{
   width: 100%;
   padding:0 0 50px 0;
   height:100%;
   overflow-y:scroll;
}
}
</style>
<script>
import HomeHeader from '../../components/Heaer';
import HomeSwiper from './swiper';
import HomeNav from './nva';
import HomeRecommend from './recommend'
export default {
   components:{HomeHeader,HomeSwiper,HomeNav,HomeRecommend},
   methods:{
       data(){
           return {
              recommends:''
           }
       },
       routerTo(){
           this.$router.push({name:'search'})
       },
       information(e){
           this.recommends=e;
           // console.log(e)
       }
   }
}
</script>

recommend组件代码

<template>
   <div class="recommend">
       <h3 class="recommend-title">热卖推荐</h3>
       <ul class="recommend-list">
           <router-link
           class="recommend-item" v-for="(item,index) in recommends" :key="index" :to="{name: 'home-product', params: {id: item.baseinfo.itemId}}" tag='li'>
                <p class="recommend-name">
                       {{item.name.shortName}}
               </p>
               <div class="recommend-pic">
                   <img class="recommend-img" :src="item.baseinfo.picUrlNew" alt="">
               </div>
                   <div class="recommend-div">
                       <div class="recommend-origPrice">
                       <del>¥{{item.price.origPrice}}</del>
                   </div>
                   <div 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>
                   </div>
                   </div>
           </router-link>
       </ul>
   </div>

</template>
<style lang="scss">
   .recommend{
       width: 100%;
       box-sizing:border-box;
       &-title{
           line-height:24px;
       }
       &-list{
           list-style-type: none;
           padding-left:0;
           width: 100%;
           .recommend-item{
               width: 100%;
               display:flex;
               flex-direction: column;
               .recommend-img{
                   width: 100%;
                   height: 220px;
               }
               .recommend-name{
                   color:yellowgreen;
                   text-align: center;
                   font-size: 18px;
                   font-weight: bold;
               }
               .recommend-origPrice{
                   display:inline-block;
                   color:pink;
                   font-size: 14px;
               }
               .recommend-info{
                   float:right;
                   color:red;
                   font-size: 16px;
               }
           }
       }
   }
</style>
<script>
   export default{
       props:['news'],
       data(){
           return{
               recommends:[],
               curPage:1,
               totalPage:1
           }
       },
       created(){
       this.jsp().then((data)=>{
           if(data){
                   // console.log(this.recommends.concat(data.itemList))
                   this.curPage++;
                   this.totalPage=data.totalPage;
                   this.recommends=this.recommends.concat(data.itemList)
                   // this.$emit('')
               }
       }).catch(err=>{console.log(err)})

   },
   methods:{
       //封装jsonp
       jsp(baseUrl='https://ju.taobao.com/',method='json/tg/ajaxGetItemsV2.json',data={
                   page:1,
                   psize:20,
                   type: 0,
                   frontCatId:''
           }){
               if(this.curPage>this.totalPage){
                   return console.log('没有更多了');
               }
           // baseUrl就是服务器地址
           let url=`${baseUrl}${method}?`;
           //jsonp请求参数和get方法类似,都是params的方法拼接
           for(let item in data){
               url+=`&${item}=${data[item]}`;
           }
           return  this.$jsonp(url);
               },
           },
   watch:{
       recommends(recommends){
           this.news(recommends)
       }
   }
}
</script>

router.js代码

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

const routes=[
 {
   path:'/home',
   component:()=>import('./views/home/home'),
   children:[{
     name: 'home-product',
     path: '/home/product/:id',
     component: () => import('./views/product/product')
   }]
 },
 {
   path:'/category',
   component:()=>import('./views/category/category')
 },
 {
   path:'/search',
   name:'search',
   component:()=>import('./views/search/search')
 },
 {
   path:'/cart',
   component:()=>import('./views/cart/cart')
 },
 {
   path:'/personal',
   component:()=>import('./views/personal/personal')
 },
 {
   path:'*',
   redirect:()=>import('./views/home/home')
 }
];
export default new Router({
 routes
});