更新记录

1.0.2（2023-03-31）

使用class+ts重构

1.0.1（2023-03-27）

优化文档

1.0.0（2023-03-27）

发布上线

平台兼容性

封装路由跳转、页面传参、页面事件传递、刷新上一页

• 为了解决页面传参需要拼接的url后面，有时候太长不美观
• 将参数改为对象形式，方便直观
• 只支持uni.redirectTo和uni.navigateTo两种模式，因为就是为了解决传参问题
• 使用hubilderx开发都会有良好的代码提示，包括url的页面路径提示

使用方法

1、hbuilderx导入插件

2、页面使用 这里以list.vue跳转detail.vue为示例

//list.vue 列表页
import uniRouter from '@/uni_modules/q-uni-route/js_sdk/index' 

// 普通使用，不传参   uniRouter.push对应uni.navigateTo   uniRouter.replace对应uni.redirectTo

uniRouter.push({ 
    url: '/pages/detail/detail',
})

uniRouter.replace({ 
    url: '/pages/detail/detail',
})

// 传参使用

uniRouter.push({ 
    url: '/pages/detail/detail',
    params: {
        id: 1,
        name: '小明',
        sex: '男',
        job: '程序员'
    },
})

uniRouter.replace({ 
    url: '/pages/detail/detail',
    params: {
        id: '1',
        name: '小明',
        sex: '男',
        job: '程序员'
    },
})

// 其他用法，通过eventChannel传递数据或者监听打开页面传递过来的数据 例如从list.vue跳转到detail.vue

uniRouter.push({
    url: '/pages/detail/detail',
    params: {
        id: '1',
        name: '小明',
        sex: '男',
        job: '程序员'
    },
    events: {
        // 在此页面监听下一个页面传过来的数据，一般用于详情页修改数据后返回列表页，并且刷新列表页
        listen: (data)=> {
            console.log(data);
            // this.list = [];//列表清空
            // this.pageIndex = 1;//请求参数改为初始值
            // this.getList() // 刷新
        }
    },
    success:(res)=>{
         // list.vue页面通过eventChannel向detail.vue页面传送数据
          res.eventChannel.emit('send', { data: '我是list.vue穿过来的数据' })
    }

});

重点 ！！！ 在detail.vue中，向list.vue传递数据 （这个一般用的比较多，详情页进行一些操作后返回列表页，让列表页刷新，可以用这个）

// detail.vue 详情页
//vue2写法
edit(){ //详情编辑成功之后，返回并且刷新列表页
    const eventChannel = this.getOpenerEventChannel();
    //这里的listen对应的是list.vue中页面跳转时events里的listen方法
    eventChannel.emit('listen', {data: 'detail.vue我修改完了，list.vue你可以刷新了'});
}

//vue3 setup写法
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance().proxy;
const edit =() =>{
    const eventChannel = instance.getOpenerEventChannel();
    //这里的listen对应的是list.vue中页面跳转时events里的listen方法
    eventChannel.emit('listen', {data: 'detail.vue我修改完了，list.vue你可以刷新了'});
}

detail.vue详情页接收list.vue列表页里params里的参数写法

//vue2写法
onLoad(options){
    console.log(options)
}

//vue3setup写法
import { onLoad } from '@dcloudio/uni-app'
onLoad((options)=>{
    console.log(options)
})
//或者通过props来直接接收 url 传入的参数
  const props = defineProps({
    id: String,
    name: String,
    sec: String,
    job: String,
  });
  console.log("id=" + props.id);
  console.log("name=" + props.name);

// vue3其他写法
 export default {
    props: {
      id: {
        type: String,
      },
      name: {
        type: String,
      },
      sec: {
        type: String,
      },
      job: {
        type: String,
      }
    },
    setup(props) {
      console.log("id=" + props.id);
      console.log("name=" + props.name); 
    },
  };

detail.vue接收list.vue跳转时success里的res.eventChannel.emit传过来的数据

//vue2写法
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  // 监听list.vue跳转success的send事件，获取上一页面通过res.eventChannel.emit传过来的数据
  eventChannel.on('send', function(data) {
    console.log(data)
  })
}

//vue3 setup写法
import { getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const instance = getCurrentInstance().proxy;
onLoad(()=>{
    const eventChannel = instance.getOpenerEventChannel();
    eventChannel.on('send', function(data) {
      console.log(data)
    })
})  

如果插件对您有一点帮助，请给个五星好评，感谢支持

如有不懂 请加qq 965969604