uniapp中页面跳转和传参

拼搏现实的明天。 2021-07-25 14:15 600阅读 0赞

## 效果图： ##

![20210306160241888.gif][]

![20210306162337112.gif][]

## 代码实现： ##

结构目录：

![20210306154929144.png][]

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>

[20210306160241888.gif]: /images/20210725/0caced0fe8e94403b13680297d62e777.png
[20210306162337112.gif]: /images/20210725/2d73f26a7a184ee0945aedbebf23c25f.png
[20210306154929144.png]: /images/20210725/d36e3286fa214559844326ea2bdd1ab2.png