uni-app学习：6、页面跳转与传参

居家隔离14-2

页面跳转，两种模式

一种,类似a标签

<template>
    <view>
        <view class="page-body">
            <view class="btn-area">
                <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳转到新页面</button>
                </navigator>                
            </view>
        </view>
    </view>
</template>

二种，使用js，个人比较喜欢这样的，整齐好修改

<template>
	<view class="content">
		这里是菜单
		<scroll-view class="menus">
			<view v-for="(menu, index) in menus" :id="'view'+index" :key="index" :class="[index == currentIndex ? 'menuActive' : '']"
			 @tap="seltag">{{menu.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '这里是菜单页面....',
				currentIndex: 0,
				menus: [
					{name:'滑动组件',url:''}, 
					{name:'按钮Button',url:'../base_data/base_button'}, 
					{name:'进度条',url:''}, 
					{name:'输入框',url:''}, 
					{name:'checkbox',url:''}
				]
			}
		},
		onLoad: function(options) {
			console.log("onLoad");
		},
		onHide: function() {
			console.log("onHide");
		},
		onShow: function() {
			console.log("onShow");
		},
		methods: {
			seltag: function(e) {
				var tempid=e.currentTarget.id;
				tempid=tempid.replace('view','');
				this.currentIndex=tempid;
				console.log('当前点击=' + e.currentTarget.id);
				// 推荐使用 e.currentTarget 这个更准

				console.log('点击=' + e.target.id);
				this.gourl(this.menus[tempid].url);
			},
			gourl:function(temp_url){
				// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
				uni.navigateTo({
				    url: temp_url
				});
				
				// 关闭当前页面，跳转到应用内的某个页面。
				// uni.redirectTo({
				//     url: temp_url
				// });
				
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
				
				
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.title {
		font-size: 36upx;
		color: #0000ff;
	}

	.menus {
		width: 100%;
		margin: 0 auto;
		padding: 20px 0px;
	}

	.menus view {
		padding: 18px;
		line-height: 20px;
		font: 16px;
		float: left;
	}

	.menuActive {
		color: #900;
		font-size: 36px;
	}
</style>

效果

需要注意的是，如果报错 Page "pages/base_data/base_button" has not been registered yet.

检查了也注册了，啥原因呢=》只需要重新编译下同步下 pages.json就好了

传参类似与web的 url追加，只是需要 不要太长了和特殊字符处理就好了

样例测试

页面A

data() {
			return {
				title: '这里是菜单页面....',
				currentIndex: 0,
				menus: [
					{name:'滑动组件',url:''}, 
					{name:'按钮Button',url:'../base_data/base_button'}, 
					{name:'传参测试',url:'../base_data/send_data?name=参数1&age=参数二'}, 
					{name:'输入框',url:''}, 
					{name:'checkbox',url:''}
				]
			}
		},

页面B接收

<template>
	<view>
		name={{t_data1}}
		age={{t_data2}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				t_data1: '',
				t_data2: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.name); //打印出上个页面传递的参数。
			console.log(option.age); //打印出上个页面传递的参数。
			this.t_data1=option.name;
			this.t_data2=option.age;
		},
		methods: {

		}
	}
</script>

<style>

</style>

效果

学习链接 https://uniapp.dcloud.io/component/navigator

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3167593