标签：vue iid E5% res item 组件 data 路由

参考官方文档：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

比如说一个详情页中的一个链接显示另一个详情页，同一个组件，路由相同但是 Params不同

如：http://localhost:8080/detail/1m745k0/      跳转到：http://localhost:8080/detail/1lyp2vg/

此时如果不做处理，跳转时，路由有更新但是数据没有替换

可以在钩子函数 created中处理 

this.$watch(()=>this.$route.params,(toParams,previousParams)=>{})

  created() {
    this.$watch(()=>this.$route.params,(toParams,previousParams)=>{
      // 当路由会其它页面时非详情页时，则会报错，所以要做这个处理
      if( this.$route.path.startsWith('/detail')){
        this.iid = toParams.iid
        getdetailinfo(this.iid).then((res)=>{
          const data = res.result;
          const imgs=data.itemInfo.topImages
          this.banner = imgs.map(x=>{
            return {'image':x}
          })
          // 2.获取商品信息
          this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

          // 3.创建店铺信息的对象
          this.shop = new Shop(data.shopInfo)
          //
          // // 4.保存商品的详情数据
          this.detailInfo = data.detailInfo;

          // 5.获取参数的信息
          this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
          // 6.获取评论信息
          if (data.rate.list){
            this.commentinfo = data.rate.list[0]
          }
        })

        getdetairecommend().then(res=>{
          this.recommend = res.data.list.map(item=>{
            // 这个接口返回的iid 都是不存在的
            item.item_id = '1m745k0'
            return item
          })
        })
      }
    })
  }

标签：vue,iid,E5%,res,item,组件,data,路由
来源： https://www.cnblogs.com/BillBie/p/16284401.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。