【小程序商城实战-Taro3开发-课程6】跳转路由

一、需求

二、实现过程

1、配置src\app.config.js

增加商品详情页面路径

export default {
  pages: [
    'pages/index/index',
    'pages/goods_detail/goods_detail'
  ]
}

2、开发“商品详情页面”

依照上一篇文章开发“商品列表组件页面”的流程进行开发，需要注意新的知识点：

• 数据传递 或者 数据共享

在商品列表页面“src\pages\index\index.vue”（记为Source页面）已经请求过商品基本信息（名称、图片、间隔等），再跳转到商品详情页面“src\pages\goods_detail\goods_detail.vue”（记为Destination页面）时，详情页面头部还会展示商品信息，中间展示详情信息，底部展示推荐列表，详情页面请求这些数据时需要用户id、商品id等参数。如何传递Source页面的数据到Destination页面呢？

(a) 跨页面跳转时，通过url传递参数，在Destination页面的事件处理方法里定义实现：

  created() {
    console.log('detail created，params:'+Taro.Current.router.params)
    try {
      this.loading = false;
      this.gid=Taro.Current.router.params.id;
      this.goods=goodsList.data.list[this.gid];
      this.content = res.content;
      this.recommendList = res.recommendList;
    } catch (error) {
      Taro.showToast({
        title: "载入远程数据错误",
      });
    }
  },

(b) 如果是父子组件间进行数据传递

          静态传值：父组件中子组件的标签设置一个自定义属性并赋值，子组件通过props接收； 

(c) 全局变量

          将数据暂时存放到全局变量里缓存

• 富文本组件

       node既可以是html字符串，也可以是树形JSON数据

<rich-text :nodes="content" />  

想要控制content里的富文本的布局，需要给里面的元素设置class，然后在css文件定义具体的样式。

var content ="<p><img class=\"goods-img\" data-origin-width=\"472\" data-origin-height=\"139\" src=\"https://img01.yzcdn.cn/upload_files/2019/10/21/Ft3xlive80nkYPAzgRLBeg0VrmPm.png\" /></p>";

.goods-img {
    width: auto!important;
    max-width: 100%!important;
    min-height: 1px;
    vertical-align: bottom;
    background: 0 0;
}