【uniapp小程序】路由跳转navigator传参封装

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// navigate.vue页面接受参数
onLoad: function (option) {
  const item = JSON.parse(decodeURIComponent(option.item));
}

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
  url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
    console.log(option.id); //打印出上个页面传递的参数。
    console.log(option.name); //打印出上个页面传递的参数。
  }
}

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})
// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue页面接受参数
onLoad: function (option) {
  const item = JSON.parse(decodeURIComponent(option.item));
}

// openType 默认值为 navigate；animationType 默认值为pop-in；animationDuration 默认值为300毫秒
Vue.prototype.goByPath = function(path, params, openType = 'navigate', animationType = 'pop-in', animationDuration =
  300) {
  // 有参数执行这里的逻辑
  if(params !==undefined && params !== null){
    if (openType == 'navigate') {
    // 如果跳转方式为navigate，则使用navigateTo方式跳转，保留当前页面，跳转到应用内的某个页面
      uni.navigateTo({
        url: path + "?params=" + encodeURIComponent(JSON.stringify(params)),
        animationType: animationType,
        animationDuration: animationDuration
      })
    } else {
    // 如果跳转方式不为navigate，则使用redirectTo方式跳转，关闭当前页面，跳转到应用内的某个页面
      uni.redirectTo({
        url: path + "?params=" + encodeURIComponent(JSON.stringify(params)),
        animationType: animationType,
        animationDuration: animationDuration
      })
    }
  }else{
  // 没有参数直接使用navigateTo方式跳转，保留当前页面，跳转到应用内的某个页面
    uni.navigateTo({
      url: path,
      animationType: animationType,
      animationDuration: animationDuration
    })
  }
}
// 返回上一页
Vue.prototype.goBack = function() {
  uni.navigateBack({
    delta: 1
  });
}

<template>
<!-- 轮播图组件 -->
    <view class="px-3 py-2 ">
      <swiperDot class="position-relative" :current="current" :info="swipers">
      <!--
          swiper常用属性介绍：
            indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的，是自定义的在右下角附近)
            autoplay：是否自动切换
            interval：图片轮播间隔此处为3秒
            duration：图片轮播动画时长 此处为0.5秒
            circular：是否开启无缝轮播（此处为到第三张图片后无缝播放第一张图片）
         -->
        <swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"
          @change="changeIndicatorDots">
          <swiper-item v-for="(item,index) in swipers" :key="index" @click="goByPath('/pages/index/detail',{src:item.src,title:item.title})">
            <image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg">
      </image>
      </swiper-item>
    </swiper>
  </swiperDot>
  </view>
</template>
<script>
  import swiperDot from '@/components/comon/swiper-doc.vue'
  export default {
    components: {
      swiperDot
    },
    data() {
      return {
        current: 0, // 标识当前选中的图片序列号
        swipers: [{
          src: '/static/swiper/1.jpg',
          title: '自定义轮播图组件图片一'
        }, {
          src: '/static/swiper/2.jpg',
          title: '自定义轮播图组件图片二名字很长测试用'
        }, {
          src: '/static/swiper/3.jpg',
          title: '自定义轮播图组件图片三'
        }]
      }
    }
</script>

<template>
  <view>
    <view class="title">
      {{title}}
    </view>
    <image :src="src" mode="sapectFill" style="height:250rpx;width: 100%;"></image>
    <view>
      <!-- 调用封装好的goBack方法返回上一页 -->
      <button type="primary" @click="goBack">返回</button>
    </view>
  </view>
</template>
<script>
  import swiperDot from '@/components/comon/swiper-doc.vue'
  export default {
    components: {
      swiperDot
    },
    data() {
      return {
        src:''，
        title:''
      }
    },
    onLoad(option) {
      // 打印传递过来的参数
      console.log(option)
      // decodeURIComponent将参数解码并使用JSON.parse() 方法用来解析JSON字符串转换为对象
      this.src = JSON.parse(decodeURIComponent(option.params)).src;
      this.title = JSON.parse(decodeURIComponent(option.params)).title;
    }
  }
</script>