uniapp：关于如何解决向tabbar页面传参这件事

先说这个问题，如何向tabbar页面传递参数，为什么会有这个问题，请看uniapp的文档上是这么写的；

所以像下方写的代码，是完全不生效的！只会跳到tabbar center页面，但是并不能在onLoad中获取到传递的参数

uni.switchTab({
	url: '/pages/center/center?id=999'
});

那么如何去向tabbar页面传递参数？

1. 利用缓存storage

<template>
	<view><button @click="click">去tabbar center页面</button></view>
</template>

<script>
export default {
	methods: {
		click() {
			uni.setStorageSync('id', 999);
			uni.switchTab({
				url: '/pages/center/center'
			});
		}
	}
};
</script>

tabbar页面 center

<template>
	<view>center</view>
</template>

<script>
export default {
	onShow() {
		const id = uni.getStorageSync('id');
		console.log(id);
	}
};
</script>

2. 利用全局变量globalData

App.vue

list页面

<template>
	<view><button @click="click">去tabbar center页面</button></view>
</template>

<script>
export default {
	methods: {
		click() {
			// 利用App.vue globalData
			getApp().globalData.id = 999;
			uni.switchTab({
				url: '/pages/center/center'
			});
		}
	}
};
</script>

tabbar页面 center

<template>
	<view>center</view>
</template>

<script>
export default {
	onShow() {
		const id = getApp().globalData.id;
		console.log(id);
	}
};
</script>

3. 利用vuex

store/index.js

list.vue

<template>
	<view><button @click="click">去tabbar center页面</button></view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	methods: {
		...mapMutations(['setId']),
		click() {
			// 3.利用vuex
			this.setId(999);
			uni.switchTab({
				url: '/pages/center/center'
			});
		}
	}
};
</script>

tabbar页面 center

<template>
	<view>center</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['id'])
	},
	onShow() {
		console.log(this.id);
	}
};
</script>

除此之外有人可能会想起为什么不适用uni.$on uni.$emit的方式，那就是看文档又不认真了嗷

如何使用uni.$emit()和uni.$on() 进行页面间通讯 - DCloud问答

 什么意思呢，就是说，如果我们tabbar center页没有被打开过，那么从任意一个页面跳转到center页面，center页面是属于首次打开的情况，那么即使你在跳转的页面使用uni.$emit发送了一个事件携带了数据，但是center中的uni.$on是监听不到的，故，在此场景中uni.$on;uni.$emit并不适用，不推荐