Uni-app navigator路由组件

来自CloudWiki
跳转至: 导航搜索

navigator组件

页面跳转。

该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto

导航组件所在页面

<template>
	<view>
		<view class="page-body">
			<view class="btn-area">
				<navigator url="/pages/clients/clients?title=跳转到新页面" hover-class="navigator-hover">
					<button type="default">跳转到新页面</button>
				</navigator>
				<navigator url="/pages/clients/clients?title=在当前页打开" open-type="redirect" hover-class="other-navigator-hover">
					<button type="default">在当前页打开</button>
				</navigator>
				<navigator url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover">
					<button type="default">跳转tab页面</button>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
// navigate.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
		
	}
}
</script>

被链接页面

<template>
	<view>
		Hello,Clients
		<view class="text-area">
					<text class="title">{{title}}</text>
		</view>
	</view>
	
</template>

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

<style>

</style>

效果图

Wexin22070501.png