vue 同一个组件下路由不同的数据刷新操作

参考官方文档：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
          })
        })
      }
    })
  }