Uniapp零基础开发学习笔记(8) -页面跳转组件及API练习使用

1.navigator页面跳转组件

navigator是一个页面跳转的标签,加在button标签前后即可。
该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
该组件的功能有API方式，另见：https://uniapp.dcloud.io/api/router?id=navigateto
典型应用：
url中写好跳转地址，页面需要在pages.json中注册过。
open-type:跳转方式,默认为navigate
其它方式还有redirect(当前页面重定向)，swithTab(切换tab)Relauch(关闭其它加载这个页面)，
navigateBack(回退)配合delta层级数一起使用
在这里插入图片描述

示例代码

<view class="btn-area">
	<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
		<button type="default">跳转到新页面</button>
	</navigator>
	<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
		<button type="default">在当前页打开</button>
	</navigator>
	<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
		<button type="default">跳转tab页面</button>
	</navigator>
</view>

我发现跳转没有实现，查看了网上说如果tabBar里面有这个页面，则应该用switchTab。
把 open-type改为switchTab果然就可以了

<navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
	<button type="primary" @click="switchTo">跳转到新页面</button>
</navigator>

2.路由及页面跳转API

教程地址:https://uniapp.dcloud.net.cn/api/router.html#navigateto
在这里插入图片描述
uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
注意：如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide
uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意：如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide
uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
uni.preloadPage(OBJECT)
预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
在这里插入图片描述
按照以上用法，按钮增加一个click事件关联switchTo使用api跳转也可以。

switchTo() {
	uni.switchTab({
		url:"/pages/login/login"
	})
}

跳转页面时可传参，例如传递用户名username和用户所在城市usercity，从user.vue到city.vue

export default {
    
    
		data() {
    
    
			return {
    
    
				userinfo:{
    
    name:"a123",city:"beijing"}
			}
		},
		methods: {
    
    
			switchTo() {
    
    
				uni.switchTab({
    
    
					url:"/pages/login/login"
				})
			},
			naviTo() {
    
    
				var urluser1 ="/pages/city/city"
				var urluser =urluser1+"?username="+this.userinfo.name+"&usercity="+this.userinfo.city;
				console.info(urluser)
				uni.navigateTo({
    
    
					url:urluser
				})
			}
	    }

将naviTo绑定到按钮的click事件上，响应函数为naviTo打印终端：
/pages/city/city?username=a123&usercity=beijing at pages/discovery/discovery.vue:79
username和usercity传参成功,但此时city页面没有写接收函数，因此页面依然为
在这里插入图片描述
因此在city.vue页面启动时Onload事件加载接收的参数
在city.vue补充内容:

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				userinfo:{
    
    name:"未知",city:"未知"}
			};
		},
		onLoad: function (option) {
    
     //option为object类型，会序列化上个页面传递的参数
				console.info(option.username); //打印出上个页面传递的参数。
				console.info(option.usercity); //打印出上个页面传递的参数。
				this.userinfo.name=option.username;
				this.userinfo.city=option.usercity;
			}
		}
</script>

Onload事件用option序列化接收上个页面发过来的变量参数值，打印出来看正确，再传给本页面中的变量
12:08:34.250 a123 at pages/city/city.vue:16
12:08:34.260 beijing at pages/city/city.vue:17
完成后跳转结果：(传参，接收都成功)
在这里插入图片描述
更复杂的用法还有传递之后，如果目标页面接收到了还可以向原始页面传递参数，同时原始页面可以接收，这个比较复杂，
示例代码如下:
主要是用到了eventChannel在两个页面之间传递数据。

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
    
    
  url: 'pages/test?id=1',
  events: {
    
    
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
    
    
      console.log(data)
    },
    someEvent: function(data) {
    
    
      console.log(data)
    }
    ...
  },
  success: function(res) {
    
    
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {
    
     data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
    
    
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {
    
    data: 'data from test page'});
  eventChannel.emit('someEvent', {
    
    data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    
    
    console.log(data)
  })
}