微信小程序路由傳參

路由傳參常用方式有以下幾種

  1. 通過url傳參

    // 產(chǎn)品列表頁面
     <navigator url="/pages/detail/detail?productId=12345" hover-class="navigator-hover">詳情</navigator>
    
    // 或者
    wx.navigateTo({
      url: '/pages/detail/detail?productId=12345'
    })
    
    // 產(chǎn)品詳情頁面
    Page({
      onLoad: function(option){
        let productId = option.productId;
        console.log(productId);
      }
    })
    

    上面的方式的參數(shù)不能是對象,如果需要傳對象,可以將對象轉(zhuǎn)成json字符串,然后拼接到url后面,在接收頁面再將json字符串轉(zhuǎn)成對象

    let info = {
     a:2,
     b:3
    }
    let infoStr = JSON.stringfy(info);
    wx.navigateTo({
      url: '/pages/detail/detail?infoStr='+infoStr
    })
    
    // 產(chǎn)品詳情頁面
    Page({
      onLoad: function(option){
        let infoStr = option.infoStr;
        let info = JSON.parse(infoStr);
      }
    })
    
  1. 通過事件傳參

    1. 官網(wǎng)例子
    // 產(chǎn)品列表頁
    wx.navigateTo({
      url: url: '/pages/detail/detail'
      events: {
        // 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)
        acceptDataFromOpenedPage: function(data) {
          console.log(data)
        },
        someEvent: function(data) {
          console.log(data)
        }
        ...
      },
      success: function(res) {
        // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })
    
    // 產(chǎn)品詳情頁
    Page({
      onLoad: function(option){
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
        eventChannel.emit('someEvent', {data: 'test'});
        // 監(jiān)聽acceptDataFromOpenerPage事件,獲取上一頁面通過eventChannel傳送到當前頁面的數(shù)據(jù)
        eventChannel.on('acceptDataFromOpenerPage', function(data) {
          console.log(data)
        })
      }
    })
    
  1. 簡化例子
    以上例子,在跳轉(zhuǎn)的時候列表頁可以向詳情頁傳數(shù)據(jù),詳情頁也可以向列表頁傳數(shù)據(jù),平時我們經(jīng)常都只是傳數(shù)據(jù),很少需要回傳,以下是簡化的例子
// 列表頁
wx.navigateTo({
  url: "/pages/home/detail/detail",
  success: function(res) {
    // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
    let data = {productId: 'sadf2323',productName:'金龍魚花生油'};
    res.eventChannel.emit("info", data);
  }
});
// 詳情頁
onLoad: function(options) {
  const eventChannel = this.getOpenerEventChannel();
  // 監(jiān)聽info事件,獲取上一頁面通過eventChannel傳送到當前頁面的數(shù)據(jù)
  eventChannel.on("info", function(data) {
     console.log(data);
  });
},

總結(jié): 路由傳參可以用這兩種方式

  1. 通過url拼接參數(shù)傳輸,需要傳對象,需要傳對象就先講對象轉(zhuǎn)成json字符串再傳
  2. 通過eventChannel(事件通道)進行傳輸(可以傳對象)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容