理解路由如何使用第四章

组件路由跳转

uni-app有两种页面路由跳转方式

（1）使用navigator组件跳转

（2）调用API跳转

navigator组件跳转

标签式路由跳转（即使用<navigator url="" open-type="">）

使用方法：

（1）打开新页面，

（2）使用navigator组件

（3）将open-type属性值为navigate，会打开新页面

注意事项

（1）如果不在navigator组件中添加open-type属性。则默认为open-type="navigator"

（2）url属性可以设置跳转的路径值为相对路径或绝对路径

（3）hover-class属性指定点击时的样式类,当hover-class="none"时,没有单机效果

（4）注意,在微信小程序中将<buttom>元素的默认边框隐藏，需要使用伪元素after，在<style>标签内添加btn：after{border:0 none } 可以隐藏<button> 元素的默认边框

页面重定向：

使用navigator组件将open-type属性值设置为redirect，会进行页面重定向，可以理解为Vue路由的replace跳转

总结1:

使用页面重定向而进行跳转，不会进入历史记录,不支持页面页面返回，可以利用该特点解决微微信小程序跳转10层限制问题

页面返回

使用组件<navigator open-type="navigate">方式跳转页面，在跳转后的页面中可以 自定义返回擦操作。

页面返回：使用uni.navigatorBack()方法关闭当前页面，返回上一页面或多级页面，并且可以决定需要返回几层

tab切换

使用uni-switch()方法跳转到tabBar页面,并关闭其他非tabBar页面

例如：在pages/train/train.vue文件中

注意：

url参数为需要跳转的tabBar页面的路径（需要在pages.json的tabBar字段中定义的页面路径不能带参数）

reLaunch

使用uni-reLaunch()方法关闭所有页面，接着跳转到应用内的某个页面

例如：在pages/airplane/airplane.vue文件中

接收参数

uni-app中的接收路由参数与Vue不同，uni-app实在onLoad()生命周期钩子函数中接收参数

在pages/index/index文件中接收参数：在页面的生命周期函数onLoad中接收参数，该函数有一个形参options，该参数是一个Object(对象)，用来接收路由参数

template>
	<view class="plane">
		<h2>飞机票页面</h2>
		<br><br>
		<text>编号：{{ id }}</text>
		<br>
		<text>标题：{{ title }}</text>
		<button type="default" @click="goReLaunch('/pages/train/train')">返回</button>
	</view>
</template>
 
<script>
	export default {
		data(){
			return {
				id:'',
				title: ''
			}
		},
		methods:{
			goReLaunch(url){
				uni.reLaunch({
					url
				})
			}
		},
		onLoad(opts){
			this.id = opts.id
			this.title= opts.title
			console.log("Id:",opts.id);
			console.log("Title:",opts.title);
		}
	}
</script>

encodeURIComponent传参

采用url传参有长度限制，太长的字符串会传递失败。可以使用encodeURIComponent以及

JSON.stringify()方法对数据进行字符串化和编码，这样可以控制url参数的长度

<template>
	<view class="page">
		<button type="primary" @click="gotoBus()">跳转到汽车票页面</button>
	</view>
</template>
 
<script>
	export default{
		methods:{
			gotoBus(){
				let obj = {
					name: '张三',
					age: 19,
					sex: '男',
					school: '蜗牛学苑'
				}
				uni.navigateTo({
					url: '/pages/bus/bus?item='+encodeURIComponent(JSON.stringify(obj))
				})
			}
		}
	}
</script>

（2）在接收信息页面中使用JSON.parse()和decodeURIComponent()接收和解码参数

<template>
	<div>
		<view>接收的信息：</view>
		<view>
			<p>姓名：{{ userObj.name }}</p>
			<p>年龄：{{ userObj.age }}</p>
			<p>性别：{{ userObj.sex }}</p>
			<p>学校：{{ userObj.school }}</p>
		</view>
	</div>
</template>
 
<script>
	export default{
		data(){
			return {
				userObj:{}
			}
		},
		onLoad(opt){
			const item = JSON.parse(decodeURIComponent(opt.item))
			this.userObj = item
		}
	}
</script>

tabBar传参

跳转到tabBar页面时是不能传参的，但在实际开发中需要在跳转tabBar页面时传参，这是可以将参数传入本地缓存来实现传参。

强调：
(1)uni-app的本地缓存是uni.setStorageSync
(2)h5的本地缓存是：localStorage和sessionStorage
实现过程：
在传递页面 ----数据----> uniapp的本地缓存 ---->接收页面（在本地缓存提取数据）

<template>
	<view>
		<view class="shop-list" @click="goPage('/pages/find/find','1001')">北京分店</view>
		<view class="shop-list" @click="goPage('/pages/find/find','1002')">上海分店</view>
		<view class="shop-list" @click="goPage('/pages/find/find','1003')">西安分店</view>
	</view>
</template>
<script>
	export default{
		methods:{
			goPage(url,id){
				//将id存入本地缓存
				uni.setStorageSync("shop_id",id)
				//跳转到tabBar页面
				uni.switchTab({
					url
				})
			}
		}
	}
</script>
<style>
	.shop-list{
		height: 40px;
		line-height: 40px;
		background-color: bisque;
		cursor: pointer;
		text-align: center;
		margin-top: 2px;
	}
</style>

在"pages/find/find"页面中

<template>
	<view>
		<view>搜索页面</view>
		<br><br>
		<view>分店Id:{{ shopId }}</view>
		<navigator url="/pages/cinema/cinema" open-type="switchTab">
			<button type="primary">返回</button>
		</navigator>
	</view>
	
</template>
 
<script>
	export default{
		data(){
			return {
				shopId:''
			}
		},
		onShow() {
			//使用uni.getStorageSync()来获取值
			this.shopId = uni.getStorageSync("shop_id")
		}
	}
</script>

自定义tabBar以及封装tabBar组件