uniapp中页面跳转和传参

open-type属性值有：navigate，navigateBack，redirect，switchTab，reLaunch

• navigate    uni.navigateTo（{url:xxx"}）    保留当前页面，跳转到应用内的某个页面    
• redirect    uni.redirectTo（{url:xxx"}）    关闭当前页面，跳转到应用内的某个页面    
• switchTab    uni.switchTab （{url:xxx"}）   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面    
• reLaunch    uni.reLaunch（{url:xxx"}）    关闭所有页面，打开到应用内的某个页面    字节跳动小程序不支持
• navigateBack    uni.navigateBack()    关闭当前页面，返回上一页面或多级页面    

 

效果图：

代码实现：

结构目录：

pages.json:

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "about页面",
				"enablePullDownRefresh": false
			}
		}
	    ,{
            "path" : "pages/message/message",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "message页面",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black", //white/black
		"navigationBarTitleText": "测试",
		"navigationBarBackgroundColor": "#ffff00" //注意：这里不要用yellow，否则在发布时编译不会通过
	},
	"tabBar": {
		"selectedColor": "#0000ff",
		"color": "#C0C0C0",
		"list": [{
			"text": "首页",
			"pagePath": "pages/index/index",
			"iconPath": "static/images/index_like.png",
			"selectedIconPath": "static/images/index_like_c.png"

		}, {
			"text": "关于",
			"pagePath": "pages/about/about",
			"iconPath": "./static/images/index_address.png",
			"selectedIconPath": "static/images/index_address_c.png"
		}]
	}
}

index.vue:

<template>
	<view>
		<navigator url="../message/message?id=10&name=lijiang">
			声明式导航-navigator跳转到message页面
		</navigator>
		<button type="primary" @click="goMessage">编程式导航--navigator到message页面</button>
		<br>
		<navigator url="../about/about" open-type="switchTab">
			声明式导航-switchTab到about页面
		</navigator>
		<button type="warn" @click="goAbout">编程式导航--switchTab到about页面</button>
		<br>
		<navigator url="../message/message" open-type="redirect">
			声明式导航-redirect到message页面
		</navigator>
		<button type="primary" @click="goAboutByRedirect">编程式导航--redirect到message页面</button>
	</view>
</template>
<script>
export default {
	data() {
		return {
		};
	},
	methods: {
		goMessage(){
			uni.navigateTo({
				url:'../message/message?id=10&name=lijiang'
			})
		},
		goAbout(){
			uni.switchTab({
				url:"../about/about"
			})
		},
		goAboutByRedirect(){
			uni.redirectTo({
				url:"../message/message"
			})
		}
	}
};
</script>

message.vue:

<template>
	<view>
		<navigator open-type="navigateBack" style="background-color: #4CD964;line-height: 80rpx;">点击返回主页</navigator>
		<button @click="goBack">返回上一个页面</button>
		
		<navigator url="../about/about" open-type="reLaunch" style="background-color: #007AFF;">可用reLaunch去任何页面，不过之前所有页面都会被卸载</navigator>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad(param) {
		console.log(param)
	},
	methods: {
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss"></style>

about.vue:

<template>
	<view>
		<button @click="toMessage">去message页面</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			toMessage(){
				uni.reLaunch({
					url:"../message/message"
				})
			}
		}
	}
</script>

<style lang="scss">

</style>

函数式传参

发送参数的页面：

encodeURIComponent(JSON.stringify(item))

 接受参数的页面：

 

JSON.parse(decodeURIComponent(option.item))