uni.switchTab頁面?zhèn)髦担▊鲄ⅲ┑姆椒?/h1>

前，uniapp開發(fā)中，是不支持uni.switchTab直接頁面?zhèn)髦档?/span>，可以通過本地存儲，在頁面的 onShow 中處理一些參數(shù)信息。但可以用本地緩存存儲的方式進行傳值：

1、設置本地緩存【uni.setStorageSync(KEY,DATA)】

參數(shù)	類型	必填	說明
key	String	是	本地緩存中的指定的 key
data	Any	是	需要存儲的內(nèi)容，只支持原生類型、及能夠通過 JSON.stringify 序列化的對象

// 基本語法
try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

2、tabbar頁面緩存的獲取【uni.getStorageSync(KEY)】

參數(shù)	類型	必填	說明
key	String	是	本地緩存中的指定的 key

onShow() {
    try {
        const value = uni.getStorageSync('index');
        if (value) {
            console.log(value);
            this.TabCur = value;
            try {
                uni.removeStorageSync('index');
            } catch(e) {
                // error
            }
        }
    } catch(e) {
        // error
    }
}

3、在頁面中獲取傳參

//獲取頁面?keyword=df81.com的keyword參數(shù)值：p.keyword
onLoad(p) {
    var keyword = '';
    if(p.keyword){
        keyword = p.keyword;
    }
}

其實，要頁面?zhèn)髦档脑挘疫€是推薦uni.navigateTo方式跳轉(zhuǎn)。

、兩種方式

方法1：name跳轉(zhuǎn)頁面

this.$router.push({name:'anotherPage',params:{id:1}})

另一頁面接收參數(shù)方式：

this.$route.params.id

示例：

控制臺展示：

方法2：path跳轉(zhuǎn)頁面

this.$router.push({path:'/anotherPage',query:{id:1}})

另一頁面接收參數(shù)方式：

this.$route.query.id

示例：

二、區(qū)別

1、path的query傳參的參數(shù)會帶在url后邊展示在地址欄(/anotherPage?id=1)，name的params傳參的參數(shù)不會展示到地址欄。

2、由于動態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效，需要用name來指定頁面。

可以使用路由傳參的方式來打開頁面并傳遞數(shù)據(jù)。

如這里傳遞的一個列表數(shù)據(jù) 以下是具體步驟：

1.1 確定數(shù)據(jù)格式

例如我們要傳遞一個名為 listData 的List，其中包含 name 和 age 兩個屬性：

let listData = [
  {name: 'Tom', age: 20},
  {name: 'Jerry', age: 18},
  {name: 'Lucy', age: 22},
]

2.2 在發(fā)送數(shù)據(jù)的頁面中，使用uni.navigateTo方法打開目標頁面，并在url后面添加參數(shù)：

uni.navigateTo({
  url: '/pages/targetPage/targetPage?listData=' + JSON.stringify(listData),
})

注意，由于路由只能傳遞字符串類型，因此需要使用 JSON.stringify() 將List數(shù)據(jù)轉(zhuǎn)換為字符串。

1.3 在接收數(shù)據(jù)的頁面中，通過onLoad方法獲取參數(shù)，并使用JSON.parse()將字符串轉(zhuǎn)換為List數(shù)據(jù)格式：

onLoad: function(options) {
  let listData = JSON.parse(options.listData)
  console.log(listData)
}

這里的 options.listData 即為發(fā)送頁面中傳遞的參數(shù)，通過 JSON.parse() 方法將其轉(zhuǎn)換為List數(shù)據(jù)格式，并進行打印輸出。

通過以上步驟，我們就可以在uniapp中打開頁面并傳遞List數(shù)據(jù)了。

2 可以通過 uni-app中的全局變量來傳遞值。

以下是具體步驟：

2.1 在App.vue中定義全局變量

例如：

export default {
  globalData: {
    message: ''
  },
  ...
}

2.2 在需要傳值的頁面中，設置全局變量的值：

this.$root.globalData.message = 'Hello World!';

2.3 在需要獲取傳值的頁面中，直接訪問全局變量的值即可：

console.log(this.$root.globalData.message); // 輸出：Hello World!

另外，還可以使用路由跳轉(zhuǎn)時傳遞參數(shù)的方式，在 $router.push 等方法中指定參數(shù)進行傳遞。

如果你有興趣可以關注一下公眾號 biglead 來獲取更多內(nèi)容

#頭條創(chuàng)作挑戰(zhàn)賽#

在線咨詢

上一篇：HTML 中的 box-border 盒子邊框詳解
下一篇：看看瀏覽器如何解析我們寫的頁面？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商